Как можно исправить ошибки, связанные с типом данных (TypeError) и получением активного Pinia при тестировании в Vitest?

Как исправить ошибки, возникающие при написании теста с модальным окном и использованием Pinia, включая TypeError и ошибку на Pinia, где указывается отсутствие активного Pinia при вызове "getActivePinia()" до использования "app.use(pinia)"?
  • 2 мая 2024 г. 21:50
Ответы на вопрос 2
Для исправления ошибок, связанных с типом данных (TypeError) и получением активного Pinia при тестировании в Vue Test Utils, следует убедиться, что Pinia инициализирован корректно перед запуском тестов. Для этого необходимо добавить следующий код в начало файла с тестами:

```javascript
import { createPinia } from 'pinia'

const pinia = createPinia()
app.use(pinia)
```

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

Что касается ошибок, возникающих при написании теста с модальным окном и использованием Pinia, включая TypeError и ошибку на Pinia, где указывается отсутствие активного Pinia при вызове "getActivePinia()" до использования "app.use(pinia)", рекомендуется также проверить правильность инициализации Pinia в самом приложении. Убедитесь, что вы добавили `app.use(pinia)` в точке входа в ваше приложение, перед созданием экземпляра Vue:

```javascript
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'

const app = createApp(App)
const pinia = createPinia()
app.use(pinia)

app.mount('#app')
```

Если вы продолжаете сталкиваться с ошибками, связанными с недоступностью активного Pinia при написании тестов, убедитесь, что вы правильно инициализировали Pinia как глобальный стейт-менеджер в вашем приложении и предоставили к нему доступ из тестов.
Если кому-то понадобится. Для того, чтобы избавиться от ошибки Pinia, я добавил createSpy: vi.fn. А для ошибки TypeError, я указал начальное состояние с точной структурой объекта, который используется в composables для рендера: 
import { describe, it, expect, beforeEach, vi } from 'vitest'

import { shallowMount } from '@vue/test-utils'

import { createTestingPinia } from '@pinia/testing'

import MainView from '@/views/MainView.vue'

describe('MainView.vue', () => {
  let wrapper: any

  const client = {
    id: 1,
    firstName: 'test',
    secondName: 'testov',
    thirdName: 'testovich',
    fullName: 'testov test testovich',
    date: {
      newDate: new Date(),
      nowDate: Date.now()
    },
    edit: {
      newEdit: new Date(),
      nowEdit: Date.now()
    },
    contacts: [
      {
        block: {
          name: 'component'
        },
        selectValue: '',
        inputValue: ''
      }
    ],
    newdCreateDate: 'today',
    newEditDate: 'today'
  }

  beforeEach(() => {
    wrapper = shallowMount(MainView, {
      global: {
        plugins: [
          createTestingPinia({
            createSpy: vi.fn,
            initialState: {
              client: {
                clientsData: [client]
              }
            }
          })
        ]
      }
    })
  })

  it('renders properly', () => {
    expect(wrapper.find('.modal').exists()).toBe(false)
  })
})
Похожие вопросы