江苏龙网

  1. 主页 > 生活百科 > >

尝试一下使用 Vitest 进行组件测试，确实很香( 三 )

Vitest


notification.test.js
/** * @vitest-environment happy-dom */import { mount } from "@vue/test-utils";import notification from "../components/notification.vue";import { describe, expect, test } from "vitest";有了这些函数，我们开始构建我们的单元测试 。
建立 Vitest 单元测试首先使用 describe 方法将测试分组 。
notification.test.js
describe("notification.vue", () => {});在 describe 块内，我们添加每个实际的测试 。
我们第一个要测试的用例是：组件根据通知类型渲染出正确的样式 。
notification.test.js
describe("notification.vue", () => {test("renders the correct style for error", () => {});});renders the correct style for error 表示 test 所检查的内容的 name 。它有助于为代码块检查的内容提供上下文，这样就可以由原作者以外的人轻松维护和更新 。它也使人们容易识别一个特定的失败的测试案例 。

尝试一下使用 Vitest 进行组件测试，确实很香

文章插图
 
notification.test.js
describe("notification.vue", () => {test("renders the correct style for error", () => {const type = "error";});});在我们组件中，定义了一个 type 参数，它接受一个字符串，用来决定诸如背景颜色、图标类型和文本颜色在组件上的渲染 。在这里，我们创建一个变量 type，并将我们正在处理的类型之一，error （error, info, 或 success）分配给它 。
notification.test.js
describe("notification.vue", () => {test("renders the correct style for error", () => {const type = "error";const wrapper = mount(notification, {props: { type },});});});在这里，我们使用 mount 来存根我们的组件，以便进行测试 。
mount 接受组件作为第一个参数，接受一个选项列表作为第二个参数 。这些选项提供了不同的属性，目的是确保你的组件能在浏览器中正常工作 。
在这个列表中，我们只需要 props 属性 。我们使用这个属性是因为我们的 notification.vue组件至少需要一个 prop 才能有效工作 。
notification.test.js
describe("notification.vue", () => {test("renders the correct style for error", () => {const type = "error";const wrapper = mount(notification, {props: { type },});expect(wrapper.classes()).toEqual(expect.arrayContaining(["notification--error"]));});});在这一点上，剩下的就是写一个断言，或者更好的是，写出我们组件的预期行为，即：renders the correct style for error 。
为了做到这一点，我们使用了 expect 方法 。它接受我们的存根组件和所有的选项（在我们的例子中，我们把它命名为wrapper以方便参考） 。
这个方法可以被链接到其他一些方法上，但是对于这个特定的断言，我们要重新检查组件的类列表是否返回一个包含这个 notification——error 的数组 。。
我们使用 classes 函数来实现这一点，该函数返回包含该组件所有类的数组 。在这之后，下一件事就是使用 toEqual 函数进行比较，它检查一个值 X 是否等于** Y** 。在这个函数中，我们检查它是否返回一个包含我们的类的数组: notification--error 。
同样，对于 type 为 success 或 info 类型，测试过程也差不多 。
import { mount } from "@vue/test-utils";import notification from "../components/notification.vue";import { describe, expect, test } from "vitest";describe("notification.vue", () => {test("renders correct style for error", () => {const type = "error";const wrapper = mount(notification, {props: { type },});expect(wrapper.classes()).toEqual(expect.arrayContaining(["notification--error"]));});test("renders correct style for success", () => {const type = "success";const wrapper = mount(notification, {props: { type },});expect(wrapper.classes()).toEqual(expect.arrayContaining(["notification--success"]));});test("renders correct style for info", () => {const type = "info";const wrapper = mount(notification, {props: { type },});expect(wrapper.classes()).toEqual(expect.arrayContaining(["notification--info"]));});test("slides down when message is not empty", () => {const message = "success";const wrapper = mount(notification, {props: { message },});expect(wrapper.classes()).toEqual(expect.arrayContaining(["notification--slide"]));});});


推荐阅读


上一篇：防火墙 网络安全——GRE VPN

下一篇：APP自动化测试框架-UiAutomator2基础