如何用jest测试Vue 3和惯性

Question

在使用 Laravel Mix 设置的 Laravel + Vue3 + Inertia 项目中，我们如何创建前端测试？

特别是，我不知道如何处理Inertia的Share Data、usePage()和useForm方法？

我遇到的第一个错误是：

    TypeError: Cannot read properties of undefined (reading 'someSharedData')                                                                                          
                                                                                                                                                              
      2 |                                                                                                                                                     
      3 | export const handleSometing = (something) =>                                                                                                        
    > 4 |   usePage().props.value.someSharedData                                                                                                
        |   ^                                                                                                                                                 
      5 |     ...                                                                                                              
      6 |   )

Answer 1

在谷歌上搜索了一些无用的时间并没有找到任何关于这个确切问题的信息后，我找到了这个解决方案。

密钥在 Jest Partial Mocking!
您可以模拟 useForm、usePage，然后使用 Jest Partial Mocking.
模拟 Shared Data 设置 vue-test-util 后，我创建了这个测试文件，它运行得非常棒。

在下面的示例中，i18n 是使用 vue-test-utils 的 config 对象模拟的。 Inertia 的方法被 jest.mock() 模仿。

import { config, shallowMount } from '@vue/test-utils'
import Dashboard from '@/Components/ExampleComponent'

config.global.mocks = {
  $t: () => '',
}

jest.mock('@inertiajs/inertia-vue3', () => ({
  __esModule: true,
  ...jest.requireActual('@inertiajs/inertia-vue3'), // Keep the rest of Inertia untouched!
  useForm: () => ({
    /** Return what you need **/
    /** Don't forget to mock post, put, ... methods **/
  }),
  usePage: () => ({
    props: {
      value: {
        someSharedData: 'something',
      },
    },
  }),
}))

test('Render ExampleComponent without crash', () => {
  const wrapper = shallowMount(ExampleComponent, {
    props: {
      otherPageProps: {}
    }
  })

  expect(wrapper.text()).toContain('Hi! I am ExampleComponent.')
})

如何用jest测试Vue 3和惯性

How to test Vue3 and intertia with jest

inertiajs

laravel

jestjs

vue-test-utils

vuejs3