Question

我有一个这样的Vue页面：

<template>
</template>

<script>
created(){
    this.doSomething();
}

methods: {
    doSomething() {
        .....
    }
}

</script>

现在，我们要测试此已创建的钩子，并检查是否已调用doSomething（）方法。

这样尝试过，玩笑也被导入package.json

import {
  shallowMount,
  createLocalVue,
} from '@vue/test-utils';

const localVue = createLocalVue();

import Xyx from '/Xyx.vue';

const init = () => {
  wrapper = shallowMount(Xyx, { localVue });
  cmp = wrapper.vm;
};

describe('#created', () => {
  it('#doSomething', () => {
    init();
    wrapper.setMethods({
      doSomething: jest.fn(),
    })
    expect(cmp.doSomething).toHaveBeenCalled();
  });
});

我可以做这个创建的钩子的单元测试用例吗？

Answer 1

{ "name": "client", "version": "0.1.0", "private": true, "proxy": "http://localhost:3001", "dependencies": { ... }, "scripts": { "start": "node server.js", "dev-start": "react-scripts start", "build": "GENERATE_SOURCEMAP=false react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject", "gen": "graphql-codegen --config codegen.yml" }, "eslintConfig": { "extends": "react-app" }, "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] }, "devDependencies": { ... } }的v1中已弃用methods选项，因此接受的答案不再起作用。我本人遇到了这个问题，并决定深入研究源代码以弄清楚如何进行测试。

看起来Vue实际上将所有钩子存储在@vue/test-utils属性中。每个挂钩都有一个选项，该选项是一个函数数组。重要的是要注意，上下文未绑定到上述功能，因此您将需要使用$options或call来执行它们。

apply

Answer 2

由于您的方法是在created上调用的，因此在您设置模拟之前，该方法已运行。因此，您的测试将失败。
您必须在初始化时用模拟代替方法（在您的情况下，在shallowMount上）：

describe('Xyz', () => {
  it('should call doSomething() when created', () => {
    const doSomething = jest.fn()
    wrapper = shallowMount(Xyz, {
      localvue,
      methods: { doSomething }
    });
    expect(wrapper.vm.doSomething).toHaveBeenCalled();
  });
});

旁注：您不是在声明cmp。在测试开始时，您应该有一个let cmp;

非常类似的讨论here。在链接的注释上方，有一种方法可以模拟大多数Vue组件生命周期挂钩的属性。

Answer 3

在测试中需要时可以调用钩子。例如，如果我们需要在调用钩子之前模拟一些数据。

import App from '@/App.vue';

// in test
App.created.call(wrapper.vm);

在Typescript中，如果我们使用vue-property-decorator，它也会更改组件的形状，因此需要这样做：

App.extendOptions.created.call(wrapper.vm)

使用带有`vue-test-utils`和`jest`的`Created`钩子进行测试

3 个答案: