为使用服务的组件编写单元测试

Question

我目前正在对 VueJS 项目进行单元测试，我想为 my-component.vue 组件创建一个 my-component.spec.js 测试（带有 Jest），该组件使用带有 inject 选项的 myService 服务。测试本身并不重要。最重要的是学习如何正确模拟使用服务的组件。经过大量研究后，我尝试编写我认为在正确轨道上的测试，但我似乎无法让它完全工作。这是测试文件中带有 3 console.log 的代码：

mock.js（包含myService服务的模拟方法的文件）：

export default function getAllInfos() {
    return [
        {"id": "myId", "name": "myName"}
    ];
}

my-component.spec.js：

import {mount} from "@vue/test-utils";
import MyComponent from "./my-component.vue";
import getAllInfos from "./mock";

describe("MyComponent", () => {
    it("returns the correct value for getAllInfos() method", () => {
        const wrapper = mount(MyComponent, {
            "provide": {
                myService() {
                    return {
                        "mock": {
                            "getAllInfos": getAllInfos()
                        }
                    };
                },
            },
            data() {
                return {
                    "infos": []
                };
            }
        });

        console.log("getAllInfos = ", wrapper.vm.$options.provide.myService().mock.getAllInfos);

        const test = wrapper.vm.$options.provide.myService().mock.getAllInfos;
        console.log("test = ", test);

        wrapper.setData({"infos": test});
        console.log("infos = ", wrapper.vm.$options.data().infos);

        expect(wrapper.vm.$options.data().infos).toEqual([
            {"id": "myId", "name": "myName"}
        ]);
    });
});

我认为我在正确的轨道上，因为当我运行 npm run test:unit 命令时，前 2 个 console.log 返回预期结果：

getAllInfos = [{id: 'myId', name: 'myName'}]
test = [{id: 'myId', name: 'myName'}]

但是，第三个console.log 对我来说似乎很奇怪：

infos = []

这意味着infos数据不是由test常量赋值的，其内容是正确的。

谁有这个问题的解决方案？

Answer 1

如果您仔细查看文档 (setData | Vue Test Utils)，您会发现您的代码存在微小但显着的差异：

// your code:
/* ... */
it("returns the correct value for getAllInfos() method", () => {
  /* ... */

  wrapper.setData({"infos": test});
  
  /* ... */
});
/* ... */

// code in docs:
/* ... */
test('setData demo', async () => {
  /* ... */

  await wrapper.setData({ foo: 'bar' })

  /* ... */
})

是的，不同之处在于，在文档中，测试是 async 函数，而 setData 正在等待。我认为这是您问题的根源。

您也可以尝试（但这是一种解决方法）：

import { createLocalVue, mount } from "@vue/test-utils";
/* ... */
const localVue = createLocalVue()
/* ... */
wrapper.setData({"infos": test});
await localVue.nextTick()
/* ... */

localVuehere的来源