Question

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

Answer 1

有两种方法：

您可以使用createLocalVue，并在该localVue类中注册mixin：

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

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

您可以在安装选项中传递mixins：

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

Answer 2

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

/// 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 组件中输入的 mixin 的顺序。对于这个例子，它看起来像：

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

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

2 个答案: