如何使用 vue-test-utils 和 jest 在单元测试期间模拟 Vue Mixins？

Question

我读了 3 遍 vue-utils-test 文档和 jest 文档，但我不知道如何在 vue 组件中模拟 vue mixins 并测试组件。

Answer 1

有两种方法：

您可以使用 createLocalVue，并在该 localVue 上注册一个 mixin class:

const localVue = createLocalVue()
localVue.mixin(myMixin)

const wrapper = shallow(Post, {
    localVue,
})

你可以在挂载选项中传入mixins:

const wrapper = shallow(Post, {
    mixins: [myMixin],
})

Answer 2

我设法用这样的玩笑间谍来模拟混合方法：

/// MyComponent.spec.js
describe('MyComponent', () => {
  let wrapper
  let localVue
  let store
  let spies = {}
  
  beforeEach(async () => {
    spies.mixinMethodName = jest.spyOn(MyComponent[1].methods, 'spies.mixinMethodName')
    ({ localVue, store } = (... custom factory ...)
    wrapper = await shallowMount(MyComponent, { localVue, store })
  })

  it('check mixin methods calls', () => {
    expect(spies.mixinMethodName).toHaveBeenCalled()
  })
})

当然 spies 对象及其附加方法可以根据您的需要进行自定义。

这种方法的弱点在于它依赖于在真正的 Vue 组件中输入的 mixins 的顺序。对于此示例，它看起来像：

/// MyComponent.vue
<script>
  export default {
    components: { ...components... },
    mixins: [mixin1, mixin2ToBeTested],
    data () {}
    ....
}
</script>

Answer 3

对于那些使用 Vue 3 和 Vue Test Utils 的人，您只需要模拟单个方法，例如使用 Jest。像往常一样传入你的 myMixin，然后监视你想要模拟的方法：

    const wrapper = mount(Post, {
        global: {
            mixins: [myMixin],
        },
    } as any)

    jest.spyOn(wrapper.vm, 'myMixinMethodToMock').mockImplementation()

请注意，Jest 模拟它时并不关心该方法是在 mixin 上，而不是在 Vue 组件上。

如何使用 vue-test-utils 和 jest 在单元测试期间模拟 Vue Mixins？

How to mock Vue Mixins during unit testing using vue-test-utils and jest?

unit-testing

mixins

vue.js

jestjs