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

2022-08-09 Vitest

在这里，我们使用 message prop创建了一个显示动态消息的组件。我们还利用 type prop 来设计这个组件的背景和文本，并利用这个 type prop 显示我们计划的不同图标（error, success, info）。
最后，我们有一个按钮，用来通过发出一个自定义事件：clear-notification来解除通知。
我们应该测试什么？现在我们对需要测试的组件的结构有了了解，我们可以再思考一下，这个组件需要做什么，以达到预期的功能。
我们的测试需要检查以下内容：

该组件根据通知类型渲染出正确的样式。
当 message 为空时，通知就会逐渐消失。
当关闭按钮被点击时，该组件会发出一个事件。

为了测试这些功能，在项目中添加一个 notification.test.js 用于测试。
安装测试依赖项在编写单元测试时，可能会有这样的情况：我们需要用一个什么都不做的假组件来替换组件的现有实现。这被称为 **stub(存根)**，为了在测试中使用存根，我们需要访问Vue Test Utils的mount方法，这是Vue.js的官方测试工具库。
现在我们来安装Vue Test Utils 。
安装npm install --save-dev @vue/test-utils@next# oryarn add --dev @vue/test-utils@next现在，在我们的测试文件中，我们可以从"@vue/test-utils"导入 mount 。
notification.test.js
import { mount } from "@vue/test-utils";在测试中，我们还需要能够模拟 DOM 。Vitest目前同时支持 hAppy-dom 和 jsdom 。对于这个演示，我们将使用happy-dom，然后安装它：
yarn add happy-dom --dev安装后，我们可以在测试文件的顶部添加以下注释...
notification.test.js
/** * @vitest-environment happy-dom */.或者将此添加到 vite/vitest 配置文件中，以避免在有多个需要 happy-dom 工作的测试文件时出现重复情况。
vite.config.js

import { defineConfig } from "vite";import vue from "@vitejs/plugin-vue";// https://vitejs.dev/config/export default defineConfig({plugins: [vue()],test: {environment: "happy-dom",},});

因为我们只有一个测试文件，所以我们可以选择第一个选项，所以我们测试文件内容如下：
notification.test.js
/** * @vitest-environment happy-dom */import { mount } from "@vue/test-utils";有了这些依赖关系，我们现在可以导入我们要测试的组件。
notification.test.js

/** * @vitest-environment happy-dom */import { mount } from "@vue/test-utils";import notification from "../components/notification.vue";

常见的Vitest方法为了编写测试，我们需要利用以下常见的方法，这些方法可以从 Vitest 导入。

describe：这个函数接受一个名字和一个函数，用于将相关的测试组合在一起。当你为一个有多个测试点（如逻辑和外观）的组件编写测试时，它就会很方便。
test/it：这个函数代表被测试的实际代码块。它接受一个字符串，通常是测试案例的名称或描述（例如，渲染成功的正确样式）和另一个函数，所有的检查和测试在这里进行。
expect：这个函数用于测试值或创建断言。它接受一个预期为实际值（字符串、数字、对象等）的参数x，并使用任何支持的方法对其进行评估（例如toEqual(y)，检查 x 是否与 y 相同）。

因此，我们现在将这些导入我们的测试文件中