mock搭建mock服务的方法(2)

import { shallowMount } from "@vue/test-utils" import Bilingual from "@/components/Bilingual.vue" describe("Bilingual", () => { it("renders successfully", () => { const wrapper = shallowMount(Bilingual, { mocks: { $t: (msg) => msg } }) }) })

现在测试通过了！ mocks   选项用处多多，而我觉得最最常用的正是开头提到过的那三样。

（译注：通过这种方式就不能在单元测试中耦合与特定语言相关的内容了，因为翻译功能实际上已失效，也更无法处理可选参数等）

使用配置设置默认的 mocks

有时需要一个 mock 的默认值，这样就不用为每个测试用例都设置一遍了。可以用 vue-test-utils   提供的   config   API 来实现。还是   vue-i18n   的例子：

import VueTestUtils from "@vue/test-utils" VueTestUtils.config.mocks["mock"] = "Default Mock Value"

这个示例中用到了 Jest，所以我将把默认 mock 描述在 jest.init.js   文件中 -- 该文件会在测试运行前被自动加载。同时我也会导入并应用此前用于示例的翻译对象。

//jest.init.js import VueTestUtils from "@vue/test-utils" import translations from "./src/translations.js" const locale = "en" VueTestUtils.config.mocks["$t"] = (msg) => translations[locale][msg]

现在尽管还是用了一个 mock 过的 $t   函数，但会渲染一个真实的翻译了。再次运行测试，这次移除了   mocks   加载选项并用   console.log   打印了   wrapper.html() 。

describe("Bilingual", () => { it("renders successfully", () => { const wrapper = shallowMount(Bilingual) console.log(wrapper.html()) }) })

测试通过，以下结构被渲染出来：

<div> Hello world! </div>

（译注：依然无法应付复杂的翻译）

总结

本文论述了：

在测试用例中使用 mocks   以 mock 一个全局对象

用 config.mocks   设置默认的 mock

以上所述是小编给大家介绍的在vue中使用express-mock搭建mock服务的方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

您可能感兴趣的文章: