标签: vue-test-utils

我有一个Vue 2.0组件，它使用Vuetify中的Menu组件。我正在使用官方的vue-test-utils在测试期间安装我的组件。

我面临的问题是Menu组件将“菜单”附加到HTML主体（超出组件范围）。因此，我无法wrapper.find('.menu')像访问组件中的任何其他元素一样访问它。

是否有使用vue-test-utils访问附加到主体的元素的好方法？

更新资料

这时我的组件看起来非常像这个Vuetify Codepen示例

然后我将组件安装成这样：

import Vuex from 'vuex'
import Vuetify from 'vuetify'
import AuthenticatedUser from './AuthenticatedUser'
import { mount, createLocalVue } from 'vue-test-utils'

const localVue = createLocalVue()
localVue.use(Vuex)
localVue.use(Vuetify)

describe('AuthenticatedUser', () => {
  let getters
  let store

  beforeEach(() => {
    getters = {
      getUserDetails: () => { name: 'John Doe' }
    }

    store = new Vuex.Store({ getters })
  })

  it('should open menu when button is clicked', () => { …

Vue Test Utils有一个API方法,称为shallowMount():

...创建一个Wrapper包含已安装和渲染的Vue组件,但包含已存根的子组件.

我搜索了Vue Test Utils文档网站,但未能找到这些存根子组件如何表现的良好解释.

1. 这些存根子组件究竟是什么？
2. 他们经历了Vue组件生命周期的哪些部分？
3. 有没有办法预先编程他们的行为？

我正在对Vue中的Jest和Element-ui进行单元测试，该组件包含一个带有2个选项的select。我从下拉菜单中选择一个选项，然后检查是否已调用操作。

1）使用normal select和optionHTML标签，可以完美地工作。

// Fruit.vue

<template lang="pug">
  select(
    v-model="fruit"
  )
    option(
      v-for="item in fruits"
      :label="item.label"
      :value="item.value"
    )
</template>
<script>
export default {
  data () {
    return {
      fruits: [
        {
          label: 'Banana',
          value: false
        },
        {
          label: 'Apple',
          value: false
        }
      ]
    }
  },
  computed: {
    fruit: {
      get () {
        return this.$store.state.fruit
      },
      set (fruit) {
        this.$store.dispatch('setSelectedFruit', { fruit })
      }
    }
  }
</script>

// DOM

<select>
  <option label="Banana" value="false"></option>
  <option label="Apple" value="false"></option>
</select>

// …

我正在测试一个使用 vue 路由器来监视 $route 的单文件组件。问题是我无法进行测试以更改路线并触发观察者的功能。

测试文件：

import { createLocalVue, shallow } from 'vue-test-utils';

import Vue from 'vue';
import Vuex from 'vuex';
const localVue = createLocalVue();
localVue.use(Vuex);

const $route = {
  path: '/my/path',
  query: { uuid: 'abc' },
}

wrapper = shallow({
  localVue,
  store,
  mocks: {
   $route,
  }
});

it('should call action when route changes', () => {
    // ensure jest has a clean state for this mocked func
    expect(actions['myVuexAction']).not.toHaveBeenCalled();
    vm.$set($route.query, 'uuid', 'def');
    //vm.$router.replace(/my/path?uuid=def') // tried when installing actual router
    //vm.$route.query.uuid …

我正在使用 vue-test-utils 和 jest。\n我的包装器包含 9 个输入元素，我想获取第三个。\n此解决方案有效：

    wrapper.findAll(\'input\').at(3) // OK\n

根据文档（https://vue-test-utils.vuejs.org/api/selectors.html），我应该能够使用CSS伪选择器，但这不起作用：

    wrapper.find(\'input:nth-of-type(3)\') // ErrorWrapper\n

使用这种方法，我只能获取第一个输入：

    wrapper.find(\'input:nth-of-type(1)\') // OK\n

我是否误用了 CSS 选择器？

我的包装 HTML 如下所示：

    wrapper.findAll(\'input\').at(3) // OK\n

根据文档，我编写了一个包含以下逻辑的 Vue 组件：

import debounce from 'lodash/debounce'

export default {
  [...]
  created () {
    this.debouncedOnSubmit = debounce(this.doSubmit, 1000)
  },
  [...]

这背后的想法是我的表单debouncedOnSubmit在提交表单时调用该方法：

        <button
          name="order-basket"
          type="submit"
          @click.prevent="debouncedOnSubmit"
        >
          Click me!
        </button>

现在，该代码在我的应用程序以及我的笑话测试中运行良好。例如，使用 vue test utils，我可以触发click该按钮上的事件，并且可以成功验证单击该按钮时应该发生的相关内容。

但是，我收到以下恼人的警告：

[Vue warn]: Error in v-on handler: "TypeError: _vm.debouncedOnSubmit is not a function"

我部分理解为什么我会收到该警告。确实，我this.debouncedOnSubmit在created()钩子中定义了。尽管该方法返回一个函数，但 Jest 很可能不理解该变量的含义debounce。

如何让 jest 理解这debouncedOnSubmit是一个函数？我需要配置什么？

我不想禁用警告，如此处所述，因为我确实想在测试中保留有关我的行为的反馈。大多数时候，这些警告确实很有帮助，但我对关闭它们感到不舒服。我该如何编写代码才能修复此警告？

编辑

• 改变

[Vue warn]: Error in v-on handler: "TypeError: _vm.debouncedOnSubmit is …

我正在阅读Vue Testing Cookbook和Vue Test Utils 的文档，其中涉及使用 Vuex 测试组件。两个来源都建议使用createLocalVue，但我不完全理解为什么。我们已经有一些使用 Vuex 但不使用 的测试createLocalVue，并且它们有效。那么为什么这些来源建议使用createLocalVue？

根据这些消息来源，以下测试似乎是一种不好的做法。这段代码会破坏某些东西吗？它是否会导致我们不知道的不良副作用？

import { mount } from '@vue/test-utils';
import Vuex from 'vuex';
import Component from 'somewhere';

// We don't use this and yet the code seems to work
// const localVue = createLocalVue()
// localVue.use(Vuex)

describe('Foo Component', () => {
    let wrapper;

    beforeEach(() => {
        wrapper = mount(Component, {
            // localVue, <-- We don't use this
            store: new Vuex.Store({ …

注意：链接的“重复”问题和答案不能回答我的问题，请投票重新打开或以其他方式解释为什么此问题已在评论中关闭

我有一个created()调用doSomething()方法的钩子。methods我可以通过将参数传递给shallowMount()并覆盖来让测试通过jest.fn()。

但是，当我采用这种方法时，我收到了有关以下内容的弃用警告methods：

console.error
[vue-test-utils]: overwriting methods via the `methods` property is deprecated and will be removed in 
the next major version. There is no clear migration path for the `methods` property - Vue does not 
support arbitrarily replacement of methods, nor should VTU. To stub a complex method extract it from 
the component and test it in isolation. Otherwise, the suggestion is to rethink those tests.

测试组件.Vue： …

我正在尝试测试methods我的 Vue 组件；测试似乎工作正常。但问题是它在控制台中给出折旧警告。

我相信vue-test-utils团队将在下一个主要版本中删除setMethods和属性。methods

我的问题是没有其他方法可以实现为 和 提供的相同setMethods功能methods property。

只是他们提出了一个警告：

To stub a complex method extract it from the component and test it in isolation. Otherwise, the suggestion is to rethink those tests.

我的问题：我们如何提取方法并测试从组件级别单击的方法的功能？

下面是我的简单示例，其中我模拟了一个方法并检查触发单击时是否在组件内部调用它。

const downloadStub = jest.fn()
const wrapper = mount(Documents, {
  methods: { downloadNow: downloadStub },
})
it('check download button clicked and calling downloadNow method', () => {
  wrapper.find('.download-button').trigger('click')
  expect(downloadStub).toBeCalled()
})

注：以上代码运行没有问题；我想知道达到相同结果并避免警告的替代方法？

我在 Vite 中使用 Jest。它一直有效，直到我从 node_module 导入模块。

import { defineComponent } from 'vue'\nimport { useCookies } from '@vueuse/integrations/useCookies'\n

我收到这个错误。

 FAIL  src/components/MyComponent/index.test.ts\n  \xe2\x97\x8f Test suite failed to run\n\n    Cannot find module '@vueuse/integrations/useCookies' from 'src/components/MyComponent/index.vue'\n\n    Require stack:\n      src/components/MyComponent/index.vue\n      src/components/MyComponent/index.test.ts\n\n      16 | <script lang="ts">\n      17 | import { defineComponent } from 'vue'\n    > 18 | import { useCookies } from '@vueuse/integrations/useCookies'\n         | ^\n      19 |\n      20 | export default defineComponent({\n\n      at Resolver.resolveModule (node_modules/jest-resolve/build/index.js:306:11)\n

我想 Jest 无法解析以“@”开头的模块。也许我应该写一个 moduleNameMapper ？我也尝试安装 vite-jest，但不知何故我的应用程序崩溃了，也许我搞砸了一些东西。