Как протестировать nuxt с помощью шутки?

Я просто изучаю Nuxt в шутку. Мой тест.vue. только что скопировано с https://nuxtjs.org/docs/2.x/features/data-fetching

<template>
  <div>
    <h1 class="page-title">Mountains</h1>
    <p v-if="$fetchState.pending">Fetching mountains...</p>
    <p v-else-if="$fetchState.error">An error occurred :(</p>
    <div v-else>
      <h1>Nuxt Mountains</h1>
      <ul>
        <li v-for="mountain of mountains">{{ mountain.title }}</li>
      </ul>
      <button @click="$fetch">Refresh</button>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      mountains: [],
    }
  },
  async fetch () {
    this.products = await fetch(
       'https://api.nuxtjs.dev/mountains'
    ).then(res => res.json())
  }
}
</script>

Мой тест.spec.js

import { mount } from '@vue/test-utils'
import Test from '@/components/test.vue'

describe('Test', () => {
  test('is a Vue instance', () => {
    const wrapper = mount(Test)
    const title = wrapper.find('.page-title')
    expect(title.text()).toBe("Mountains")
  })
})

Пока я запускаю тест запуска npm, я получил эту ошибку. Как я могу решить эту проблему?

[Vue warn]: Error in render: "TypeError: Cannot read property 'pending' of undefined"

person user2389511    schedule 06.12.2020    source источник


Ответы (1)


В настоящее время нет библиотеки для расширения структуры компонентов nuxt в vue-test-utils.

При этом вы можете довольно легко сделать некоторые из них самостоятельно, используя mocks API.

mounted(Component, { mocks: { $fetchState: { pending: true, error: true, timestamp: Date.now() } } })

Действительно сложная часть заключается в том, что fetch не находится внутри компонента. вы можете найти его в опциях, wrapper.vm.$options.fetch(), но пока нет реального способа проверить...

person Hamish Hossack    schedule 08.12.2020
comment
Поскольку мы получаем ссылку от $options, мне пришлось настроить this на правильный контекст, в моем случае сработало await wrapper.vm.$options.fetch.apply(wrapper.vm, []) - person Jesus Monzon Legido; 03.05.2021