Vitest 快速上手

前置阅读：前端自动化测试概述

0x01 概述

• 官网：https://cn.vitest.dev

• 特点：

  • 原生支持并由 Vite 驱动
  • 兼容 Jest
  • 支持 ESM、TypeScript、JSX

• 创建项目与第一个测试用例

  1. 使用命令 npm create vite@latest 创建基于 Vite 构建的项目

  2. 选择 React 项目 + JavaScript

  3. 进入项目目录并使用命令 npm install 安装依赖

  4. 使用命令 npm install --save-dev vitest jsdom @testing-library/jest-dom @testing-library/react @testing-library/user-event @testing-library/jest-dom 安装 Vitest、Testing Library 及其相关依赖

  5. 在根目录创建 tests\setup.js 目录及文件，并编辑

     import '@testing-library/jest-dom';
     import { cleanup } from "@testing-library/react";
     import { afterEach, vi } from "vitest";
     
     afterEach(() => {
       cleanup();
       vi.clearAllMocks();
     });
     

  6. 修改 vite.config.js

     import { defineConfig } from "vite";
     import react from "@vitejs/plugin-react";
     
     export default defineConfig({
       plugins: [react()],
       test: {
         globals: true,
         environment: "jsdom",
         setupFiles: "./tests/setup",
       },
     });
     

  7. 在 src 目录下创建 utils.test.js 并编辑

     import { describe, expect, it } from "vitest";
     
     describe("utils", () => {
       it("1 + 1 = 2", () => {
         expect(1 + 1).toEqual(2);
       });
     });
     

  8. 修改 package.json，在 scripts 中新增以下内容

     "test": "vitest"
     

  9. 使用命令 npm run test 执行测试

0x02 JavaScript 代码单元测试

1. 在 src 目录下新建 utils.js

   export const range = (start, end) =>
     [...Array(end - start).keys()].map((el) => el + start);
   

2. 修改 utils.test.js

   import { describe, expect, it } from "vitest";
   import { range } from "./utils";
   
   describe("utils", () => {
     it("返回正确结果 1 到 5", () => {
       const result = range(1, 6);
       expect(result).toEqual([1, 2, 3, 4, 5]);
     });
     it("返回正确结果 12 到 13", () => {
       const result = range(12, 14);
       expect(result).toEqual([12, 13]);
     });
   });
   

0x03 React 组件测试

以提示框为例

1. 在 src 目录下创建 components\toast.jsx

   function Toast({ msg = "内容" }) {
     return <div data-testid="message-container">{msg}</div>;
   }
   
   export default Toast;
   

2. 在同目录下创建 toast.test.jsx

   import { render, screen } from "@testing-library/react";
   import { describe, expect } from "vitest";
   import Toast from "./toast";
   
   const message = "Hello World!";
   
   describe("toast", () => {
     it("提示内容", () => {
       render(<Toast />);
   
       const element = screen.getByTestId("message-container");
   
       expect(element.textContent).toEqual("内容");
     });
     it(`提示 ${message}`, () => {
       render(<Toast msg={message} />);
   
       const element = screen.getByTestId("message-container");
   
       expect(element.textContent).toEqual(message);
     });
   });
   

0x04 事件测试

以分页器为例

1. 在 components 目录下创建 pagination.jsx

   import { range } from "../utils";
   
   function Pagination({ total, limit, currentPage, selectPage }) {
     const count = Math.ceil(total / limit);
     const pages = range(1, count + 1);
   
     return (
       <ul>
         {pages.map((page) => (
           <li
             data-testid="page-container"
             key={page}
             onClick={() => selectPage(page)}
             className={{
               "page-item": true,
               active: currentPage === page,
             }}
           >
             <span className="page-link">{page}</span>
           </li>
         ))}
       </ul>
     );
   }
   
   export default Pagination;
   

2. 在同目录下创建 pagination.test.jsx

   import { render, screen } from "@testing-library/react";
   import { describe, expect, it, vi } from "vitest";
   import Pagination from "./pagination";
   import userEvent from "@testing-library/user-event";
   
   describe("pagation", () => {
     it("测试分页", () => {
       render(<Pagination total={50} limit={10} currentPage={1} />);
   
       const elements = screen.getAllByTestId("page-container");
   
       expect(elements).toHaveLength(5);
       expect(elements[0]).toHaveTextContent("1");
     });
     it("测试点击事件", async () => {
       const user = userEvent.setup(),
         handleClick = vi.fn();
   
       render(
         <Pagination
           total={50}
           limit={10}
           currentPage={1}
           selectPage={handleClick}
         />
       );
   
       const elements = screen.getAllByTestId("page-container");
       await user.click(elements[0]);
   
       expect(handleClick).toHaveBeenCalledOnce();
       expect(handleClick).toHaveBeenCalledWith(1);
     });
   });
   

0x05 结合 Vue

1. 使用命令 npm create vite@latest 创建基于 Vite 构建的项目

2. 选择 Vue 项目 + JavaScript

3. 进入项目目录并使用命令 npm install 安装依赖

4. 使用命令 npm install --save-dev vitest jsdom @testing-library/jest-dom @testing-library/vue @testing-library/user-event 安装 Vitest、Testing Library 及其相关依赖

5. 在根目录创建 tests\setup.js 目录及文件，并编辑

   import "@testing-library/jest-dom";
   import { cleanup } from "@testing-library/vue";
   import { afterEach, vi } from "vitest";
   
   afterEach(() => {
     cleanup();
     vi.clearAllMocks();
   });
   

6. 修改 vite.config.js

   import { defineConfig } from "vite";
   import vue from "@vitejs/plugin-vue";
   
   export default defineConfig({
     plugins: [vue()],
     test: {
       globals: true,
       environment: "jsdom",
       setupFiles: "./tests/setup",
     },
   });
   

7. 在 src 目录下创建 App.test.js 并编辑

   import userEvent from "@testing-library/user-event";
   import { render, screen } from "@testing-library/vue";
   import { describe, expect, it } from "vitest";
   import App from "./App.vue";
   import HelloWorld from "./components/HelloWorld.vue";
   
   const user = userEvent.setup();
   
   describe("App", () => {
     it("元素存在", () => {
       render(App);
   
       const element = screen.getByAltText("Vue logo");
   
       expect(element).toBeInTheDocument();
     });
   });
   
   describe("HelloWorld", () => {
     it("计数器增加", async () => {
       render(HelloWorld);
   
       const element = screen.getByText("count is 0");
       await user.click(element);
   
       expect(element).toHaveTextContent("count is 1");
     });
   });
   
   

8. 修改 package.json，在 scripts 中新增以下内容

   "test": "vitest"
   

9. 使用命令 npm run test 执行测试

-End-