英文:
How to add/mock the Nuxt Auth library when testing components in Nuxt with Jest
问题
JS新手在这里。
我已经生成了一个Nuxt应用程序，并在我的nuxt.config.js中全局实现了@nuxt/auth中间件。它在我的应用程序中按预期工作。
现在我想测试一些引用$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()})})
这会引发以下错误：
渲染错误：“TypeError: 无法读取未定义的属性'loggedIn'”
所以显然我需要在某个地方定义auth，所以我的问题是：
- 我应该在哪里以及如何将此依赖项添加到我的测试中（每个测试？全局为所有测试？）？
- 如何模拟
loggedIn方法的响应，以便我可以测试已登录/未登录的情况？ - 有没有办法在我的测试中模拟Nuxt环境，以便我可以测试我的组件等，就好像它们已在Nuxt中挂载？这是一个好主意吗？
提前感谢任何帮助！
英文:
JS newbie here.
I have generated a Nuxt app and have implemented the @nuxt/auth middleware globally in my nuxt.config.js. It's working as expected in my app.
Now I would like to test some of my components that reference the $auth object.
// ~/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>
I have a test that looks like this:
// ~/spec/components/hello_component.spec.jsimport { 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()})})
Which causes the following error
Error in render: "TypeError: Cannot read property 'loggedIn' of undefined"
So clearly I need to define auth somewhere, so my questions are:
- Where and how should I add this dependency to my tests (per test? globally for all tests?)?
- How can I mock the response of the
loggedInmethod so that I can test scenarios where I'm either logged in/out? - Is there a way to mock the Nuxt environment in my tests so that I can test my components etc as if they were mounted in Nuxt? Is that a even a good idea?
Thanks in advance for any help!
答案1
得分: 8
你可以通过在调用mount时传递一个options对象中的模拟对象来模拟你的$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()})})
你可以根据需要扩展模拟对象，或更改它在每个测试中返回的值。
英文:
You can mock your $auth object it by passing the mock in an options object when calling mount
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()})})
You can extend the mock however your like, or change the values that it returns for each test.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论