Блог

В Laravel Vue3 Inertia проекте , который использует настройку Laravel Mix , как мы можем создавать интерфейсные тесты?

Тем более, я понятия не имею , как с ними обращаться 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 |   )
 

Погуглив несколько бесполезных часов и ничего не найдя для этой конкретной проблемы, я нашел это решение.

Ключ был внутри Jest Partial Mocking !
Вы можете издеваться useForm usePage , а затем Shared Data использовать Jest Partial Mocking .
После настройки vue-test-util я создал этот тестовый файл , и он работал как заклинание.

В приведенном ниже примере i18n над объектом издеваются с помощью config объекта vue-test-utils . Эти 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.')
})