标签: vue-test-utils

我有这样的情况：

// symbols.ts - Injection Key defined as a Symbol\nexport const FAQ_SERVICE: InjectionKey<FAQService> = Symbol('FAQService');\n\n// main.ts - globally provides a service using the injection key\napp.provide(FAQ_SERVICE, new FAQService());\n\n// FAQIndex.vue - component using the injected service\n\xe2\x80\xa6\nsetup() {\n  return {\n    faqService: inject(FAQ_SERVICE) as FAQService,\n  };\n}\n\xe2\x80\xa6\n

现在我想使用 jest 测试这个组件并模拟该服务。我知道当我使用纯字符串提供对象时，我可以通过以下模式来做到这一点：

component = mount(FAQIndex, {\n  global: {\n    provide: {\n      'FAQ_SERVICE': { /* mock object */ },\n    },\n  },\n});\n

但是，当如上例所示通过符号注入服务时，我该如何做到这一点呢？

在这个测试中，我只是试图断言该end属性是在被测组件上设置的 ( DateRangeEditor)。该组件假定this.$refs.datepicker是一个实例HotelDatepicker并调用它的setCheckOut和setCheckIn方法（如果有更好的方法来做到这一点，请告诉我！）。

该组件在浏览器中正常加载时工作，但我的测试setEndDate失败并显示“TypeError: this.$refs.datepicker.setCheckIn is not a function”。

我是否误解了该stubs选项应该做什么设置？我认为像这样的场景，调用代码只需要调用存根函数而不需要特定结果，正是存根的用途。我只是用错了吗？

这是我的测试：

import { mount, shallow } from 'vue-test-utils'
import DateRangeEditor from '../../assets/src/components/DateRangeEditor.vue'

describe('DateRangeEditor', () => {

  describe('@checkOutChanged', () => {
    it('sets a new end date', () => {
      const wrapper = shallow(DateRangeEditor, {
        stubs: ['datepicker']
      })

      // simulate user changing the end date
      const date = new Date(2017, 11, 1)
      wrapper.vm.$refs.datepicker.$emit('checkOutChanged', date)

      expect(wrapper.vm.end).to.equal(date)
    }) …

所以我们有一个 Vue.js mixin，它是在单个组件中继承的。mixin 有一个由少数组件继承的模板，它可以正常工作。但是，我不知道如何使用 vue-test-utils 测试模板。

这是我正在做的事情的一个简化示例：

describe('MiMixin', () => {
    let wrapper

    wrapper = mount({
        mixins: [MiMixin]
    })

    it('should set the mixin template as the markup', () => {
        wrapper.find('.mi-component').trigger('click')
    })
})

当我运行它时，我收到消息：

[vue-test-utils]: find did not return .mi-component, cannot call trigger() on empty Wrapper

如果我向挂载的 Vue 组件添加渲染函数，它只会渲染我返回的任何标记（如预期）。但是，当没有 render 方法（因此也没有模板）时，组件的 html 是未定义的。

问题：

1. 为什么'find'函数找不到mixin的模板？
2. 单独测试 mixin 是否正确，还是在真实组件中测试它更好？

注意：模板似乎确实存在于 VueComponent 下的包装器中：

VueWrapper {
    vnode: [Getter/Setter],
    element: [Getter/Setter],
    update: [Function: bound update],
    options: { attachedToDocument: false },
    version: 2.5,
    vm: …

我正在为我的组件创建一些单元测试，但测试一直失败，因为我正在测试的按钮始终没有被点击事件触发。

我使用这些文档作为测试的基础：https ://vuetifyjs.com/sv-SE/getting-started/unit-testing/

我还尝试了这里提到的一些建议：https://forum.vuejs.org/t/how-to-trigger-an-onchange-event/11081/4

但我似乎错过了一些东西，有人可以帮助我吗？

我的测试：

test('If you can click on the Test button', () => {
        const wrapper = shallowMount(myComponent, {
            localVue,
            vuetify,

        });

        const event = jest.fn();
        const button = wrapper.find({name: 'v-btn'})

        expect(button.exists()).toBe(true) //this works

         wrapper.vm.$on('v-btn:clicked', event)

        expect(event).toHaveBeenCalledTimes(0)

         button.trigger('click')

         expect(event).toHaveBeenCalledTimes(1)

    })

我的组件：

<template>

<v-btn class="primary-text" @click.native="methodForTesting($event)">Test</v-btn>

<template>

<script>
methods: {

methodForTesting(){
  console.log('button clicked!')
}
</script>

我如何npm run test:unit在编写和保存测试时保持命令运行，我需要像npm run serve热重载这样的东西，我已经试过了，npm run test:unit --watch但它不起作用。

我正在为 Vue.js 组件编写单元测试，该组件显示一些单选按钮，并在选中按钮时发出带有单选按钮 id 的事件：

应用程序元素.vue：

<template>
  <div id="element">
    <label>
      <input
        type="radio"
        name="Element"
        id="element1"
        v-on:change="chooseElement"
      />
      Element1
    </label>
    <label>
      <input
        type="radio"
        name="Element"
        id="element2"
        v-on:change="chooseElement"
      />
      Element2
    </label>
    <label>
      <input
        type="radio"
        name="Element"
        id="element3"
        v-on:change="chooseElement"
      />
      Element3
    </label>
    <label>
      <input
        type="radio"
        name="Element"
        id="element4"
        v-on:change="chooseElement"
      />
      Element4
    </label>
  </div>
</template>

<script>
export default {
  methods: {
    chooseElement () {
      var chosenElement = document.querySelector('input[name="Element"]:checked').id
      this.$emit('passChosenElement', {category: chosenElement})
    }
  }
}
</script>

<style>
</style>

我为该组件编写了以下测试：

ApplicationElement.spec.js：

import { shallowMount, createLocalVue } from '@vue/test-utils'
import 'regenerator-runtime/runtime' …

npm run dev在运行我开发的 using时，我遇到了一个非常奇怪的错误Nuxt.js，它有Vue.js组件。也就是说，在运行应用程序时，我看到与TypeScript诸如相关的错误TS2749: 'About' refers to a value, but is being used as a type here. Did you mean 'typeof About'?，即使npm run test没有显示任何内容。

我的spec.ts文件带有抱怨行

import { shallowMount, Wrapper } from "@vue/test-utils";    
import About from "@/pages/about.vue";

describe("About", () => {
  const wrapper: Wrapper<About> = shallowMount(About); // <-- Complaining line
  ...
}

在设置打字之前突出显示时，类型应该没问题，它显示了下面的类型。

建议的解决方案会const wrapper: Wrapper<typeof About> = shallowMount(About);生成另一个TypeScript错误，导致测试无法编译。即，TS2344: Type 'ExtendedVue<Vue, unknown, unknown, …

我已经在全局注册了一个组件并在多个文件中使用。有超过100个测试用例文件同时使用了mount和shallowMount，所以我无法转到每个测试用例并将mount更改为shallowMount。

有没有办法全局存根组件，而不是转到每个测试用例并手动存根它。

使用 bootstrap-vue 的 vb-tooltip.hover 时，单元测试不断发出警告：
[BootstrapVue warn]: tooltip - 提供的目标不是有效的 HTML 元素。

我在使用 vitest 进行测试时无法使用 Vue3 运行模拟操作。

我有一个组件，它调用一个模块化的 vuex 存储，该存储使用组合 api 导入到我的组件中。像下面这样的东西。

export default defineComponent({
  setup() {
    const { doAction } = useModActions([
      'doAction'
    ])
  }
})

我用来createNamespacedHelpers从 vuex-composition-helpers 库设置我的商店模块。

在我使用useStore密钥Symbol设置商店状态后。我通过执行以下操作在我的应用程序中使用它

app.use(store, key)

为了在我的测试中模拟它，我正在尝试以下操作

   const actions = {
      doAction: vi.fn()
    }
    const spy = vi.spyOn(actions, 'doAction')
    const mockStore = createStore({
      modules: {
        mod: {
          namespaced: true,
          actions
        }
      }
    })
    const wrapper = mount(Component, {
      global: {
        provide: { [key]: mockStore }
      }
    })

但我的间谍从未被调用，我的组件总是调用原始实现。有没有办法让所有这些部分一起工作？