使用 Jest 在 Nuxt 中测试组件时如何添加/模拟 Nuxt Auth 库

Question

JS新手在这里。

我已经生成了一个 Nuxt 应用程序并@nuxt/auth在我的nuxt.config.js. 它在我的应用程序中按预期工作。

现在我想测试一些引用该$auth对象的组件。

// ~/components/hello_component.vue

<template>
  <div>
    <div v-if="$auth.loggedIn">
      <h1>Hi, {{ userName }}</h1>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    userName: "Archduke Chocula"
  }
}
</script>

我有一个看起来像这样的测试：

// ~/spec/components/hello_component.spec.js

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

describe('Hello Component', () => {
  test('is a Vue instance', () => {
    const wrapper = mount(Hello)
    expect(wrapper.isVueInstance()).toBeTruthy()
  })
})

这导致以下错误

Error in render: "TypeError: Cannot read property 'loggedIn' of undefined"

很明显，我需要在某处定义身份验证，所以我的问题是：

1. 我应该在哪里以及如何将此依赖项添加到我的测试中（每个测试？全局所有测试？）？
2. 我如何模拟loggedIn方法的响应，以便我可以测试我登录/注销的场景？
3. 有没有办法在我的测试中模拟 Nuxt 环境，以便我可以测试我的组件等，就像它们安装在 Nuxt 中一样？这是一个好主意吗？

在此先感谢您的帮助！

Answer 1

您可以通过在调用mount时在选项对象中传递模拟来模拟您的 $auth 对象

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

const authMock = {
  loggedIn: true
};

describe('Hello Component', () => {
  test('is a Vue instance', () => {
    const wrapper = mount(Hello, {
      mocks: {
        $auth: authMock
      }
    })
    expect(wrapper.isVueInstance()).toBeTruthy()
  })
})

您可以根据自己的喜好扩展模拟，或者更改它为每个测试返回的值。