首页 > 其他分享 >基于vite创建的react18项目的单元测试

基于vite创建的react18项目的单元测试

时间：2024-11-26 19:28:47浏览次数：9  
标签：登录 screen 单元测试 react18 Wjllogin import fireEvent vite expect

题外话

最近一个小伙伴进了字节外包，第一个活就是让他写一个单元测试。

嗯，说实话，在今天之前我只知道一些理论，但是并没有实操过，于是我就试验了一下。

通过查询资料，大拿们基本都说基于vite的项目，用vitest进行测试比较方便一写。

闲话不多说，步入正题。

1、下载依赖

在vscode终端输入以下命令：

npm install --save-dev vitest @testing-library/react @testing-library/jest-dom

  1. --save-dev: 这个标志表示将这些包添加为开发依赖（devDependencies）。这些依赖只在开发环境中使用，而不会被包含在生产环境中。例如，测试框架和工具通常只在开发时需要，而不需要在生产环境中。

  2. vitest: 这是一个快速的单元测试框架，类似于 Jest，但专为 Vite 生态系统设计。它支持现代 JavaScript 特性，并且与 Vite 无缝集成，非常适合用于测试 Vite 创建的项目。

  3. @testing-library/react: 这是一个用于测试 React 组件的库，提供了一组 API，使得编写测试变得简单而直观。它鼓励以用户的方式来测试组件，而不是实现细节，从而提高测试的可靠性和可维护性。

  4. @testing-library/jest-dom: 这是一个为 Jest 提供的自定义匹配器库，增强了 Jest 的断言功能，使得你可以使用更自然的语法来进行 DOM 相关的断言。例如，你可以使用 toBeInTheDocument() 来检查某个元素是否在文档中，而不需要写复杂的查询逻辑。

2、创建testSetup.js文件

文件里只有一行代码：

import '@testing-library/jest-dom';

3、配置vite.config.js文件

代码如下：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  test: {
    globals: true,
    environment: 'jsdom',
    setupFiles: './testSetup.js',
  },
})
  • test: 这是 Vitest 的配置部分。
  • globals: true: 这个选项表示在测试文件中可以使用全局的测试函数，比如 describe、test、expect 等，而不需要每次都导入它们。
  • environment: 'jsdom': 这个选项指定测试运行在 jsdom 环境中。jsdom 是一个 JavaScript 实现的 DOM，用于模拟浏览器环境，这样你可以在 Node.js 中运行测试并且测试涉及 DOM 操作的代码。
  • setupFiles: './testSetup.js': 这个选项指定一个设置文件，在测试运行之前会执行。在第二步中我只是引入了一个包。

4、添加脚本

在项目的 package.json 中添加测试脚本：

"scripts": {
  "test": "vitest"
}

5、创建测试文件

在你的组件目录下，创建一个与组件同名的测试文件，通常以 .test.tsx 结尾。例如，如果你有一个 Wjllogin.jsx 组件，你可以在同一目录下创建 Wjllogin.test.jsx。

我的demo中的Wjllogin.jsx中的代码如下：

import React, { useState } from "react"; // 导入 React 和 useState Hook
import "./wjs.scss"; // 导入样式文件
import "animate.css"; // 导入动画效果库
import { wjllogin } from "../axiosAPI/wjl"; // 导入用于登录的 API 函数
import { useNavigate } from "react-router-dom"; // 导入路由导航 Hook
import { message } from "antd"; // 导入 Ant Design 的消息提示组件

// 定义 Wjllogin 组件
export default function Wjllogin() {
	let navigate = useNavigate(); // 初始化路由导航
	let [name, setName] = useState(""); // 定义状态变量 name 和更新函数 setName
	let [card, setCard] = useState(""); // 定义状态变量 card 和更新函数 setCard
	let [tid, setTid] = useState(""); // 定义状态变量 tid 和更新函数 setTid

	const [messageApi, contextHolder] = message.useMessage(); // 使用 Ant Design 的消息提示 API

	// 定义登录函数
	let login = async () => {
		// 调用 wjllogin API 进行登录
		let {
			data: { code, sid, clazz, sname }, // 解构 API 返回的数据
		} = await wjllogin({ name, card, tid }); // 传递姓名、身份证号和学号到 API

		// 检查返回的状态码
		if (code === 200) {
			// 登录成功，保存用户信息到 sessionStorage
			sessionStorage.setItem("sid", sid); // 保存会话 ID
			sessionStorage.setItem("clazz", clazz); // 保存班级信息
			sessionStorage.setItem("token", "token"); // 保存 token（这里是示例，实际应从 API 获取）
			sessionStorage.setItem("sname", sname); // 保存姓名

			// 显示成功消息
			messageApi.open({
				type: "success",
				content: "登录成功, 即将跳转至主页",
			});

			// 设置延迟后跳转到主页
			setTimeout(() => {
				navigate("/wjlhome"); // 跳转到主页
			}, 2000);
		} else {
			// 登录失败，显示错误消息
			messageApi.open({
				type: "error",
				content: "登录失败,请检查姓名、身份证号或学号",
			});
		}
	};

	// 组件的 JSX 结构
	return (
		<div className="examlogin animate__animated animate__slideInLeft">
			{" "}
			{/* 主容器，包含动画效果 */}
			<div className="top">
				{" "}
				{/* 顶部区域 */}
				<img
					className="main"
					src="https://cdn7.axureshop.com/demo/2001850/images/%E5%9C%A8%E7%BA%BF%E8%80%83%E8%AF%95/u2853.svg"
					alt=""
				/>{" "}
				{/* 主图标 */}
				<img
					className="x"
					src="https://cdn7.axureshop.com/demo/2001850/images/%E5%9C%A8%E7%BA%BF%E8%80%83%E8%AF%95/u2854.svg"
					alt=""
				/>{" "}
				{/* 副图标 */}
			</div>
			<div className="title">
				{" "}
				{/* 标题区域 */}
				培训学院在线考试系统 {/* 系统名称 */}
				<span className="lessfont">考生版</span> {/* 子标题 */}
			</div>
			<div className="form">
				{" "}
				{/* 表单区域 */}
				<p>
					<label htmlFor="name">考生姓名:</label>
					<input
						id="name"
						value={name}
						onChange={(e) => setName(e.target.value)}
					/>
				</p>
				<p>
					<label htmlFor="card">身份证号:</label>
					<input
						id="card"
						type="text" // 输入框类型
						value={card} // 绑定到 card 状态
						onChange={(e) => {
							setCard(e.target.value); // 更新 card 状态
						}}
					/>
				</p>
				<p>
					<label htmlFor="tid">学号:</label> {/* 学号标签 */}
					<input
						id="tid"
						type="text" // 输入框类型
						value={tid} // 绑定到 tid 状态
						onChange={(e) => {
							setTid(e.target.value); // 更新 tid 状态
						}}
					/>
				</p>
				<p>
					<button
						className="btn" // 按钮样式
						onClick={() => {
							login(); // 点击按钮时调用 login 函数
						}}>
						登录 {/* 按钮文本 */}
					</button>
				</p>
				{contextHolder} {/* 显示消息提示的容器 */}
			</div>
		</div>
	);
}

测试代码Wjllogin.test.jsx中的代码如下：

import { render, screen, fireEvent, waitFor } from '@testing-library/react';
import { MemoryRouter } from 'react-router-dom'; // 导入 MemoryRouter
import Wjllogin from './Wjllogin'; // 根据你的文件路径调整
import { wjllogin } from '../axiosAPI/wjl'; // 导入登录 API
import { describe, it, beforeEach, vi } from 'vitest'; // 导入 Vitest 的函数

// Mock the API call
vi.mock('../axiosAPI/wjl', () => ({
  wjllogin: vi.fn(),
}));

describe('Wjllogin Component', () => {
  beforeEach(() => {
    // 清除所有的 mocks
    vi.clearAllMocks();
  });

  it('renders Wjllogin component', () => {
    render(
      <MemoryRouter>
        <Wjllogin />
      </MemoryRouter>
    );
    
    // Check if elements are rendered
    expect(screen.getByText(/考生姓名:/)).toBeInTheDocument();
    expect(screen.getByText(/身份证号:/)).toBeInTheDocument();
    expect(screen.getByText(/学号:/)).toBeInTheDocument();
    expect(screen.getByRole('button', { name: /登录/i })).toBeInTheDocument();
  });

  it('successful login', async () => {
    // Mock the API response for a successful login
    wjllogin.mockResolvedValueOnce({
      data: { code: 200, sid: '123', clazz: 'A1', sname: 'John Doe' },
    });

    render(
      <MemoryRouter>
        <Wjllogin />
      </MemoryRouter>
    );

    // Fill in the input fields
    fireEvent.change(screen.getByLabelText(/考生姓名:/), { target: { value: 'John Doe' } });
    fireEvent.change(screen.getByLabelText(/身份证号:/), { target: { value: '123456789012345678' } });
    fireEvent.change(screen.getByLabelText(/学号:/), { target: { value: '2023001' } });

    // Click the login button
    fireEvent.click(screen.getByRole('button', { name: /登录/i }));

    // Wait for the success message to appear
    await waitFor(() => {
      expect(screen.getByText(/登录成功, 即将跳转至主页/)).toBeInTheDocument();
    });

    // Check if sessionStorage is set (you may need to mock sessionStorage)
    expect(sessionStorage.getItem('sid')).toBe('123');
    expect(sessionStorage.getItem('clazz')).toBe('A1');
    expect(sessionStorage.getItem('sname')).toBe('John Doe');
  });

  it('failed login', async () => {
    // Mock the API response for a failed login
    wjllogin.mockResolvedValueOnce({
      data: { code: 400 },
    });

    render(
      <MemoryRouter>
        <Wjllogin />
      </MemoryRouter>
    );

    // Fill in the input fields
    fireEvent.change(screen.getByLabelText(/考生姓名:/), { target: { value: 'Invalid User' } });
    fireEvent.change(screen.getByLabelText(/身份证号:/), { target: { value: '000000000000000000' } });
    fireEvent.change(screen.getByLabelText(/学号:/), { target: { value: '0000000' } });

    // Click the login button
    fireEvent.click(screen.getByRole('button', { name: /登录/i }));

    // Wait for the error message to appear
    await waitFor(() => {
      expect(screen.getByText(/登录失败,请检查姓名、身份证号或学号/)).toBeInTheDocument();
    });
  });
});

解释代码

import { render, screen, fireEvent, waitFor } from '@testing-library/react';
import { MemoryRouter } from 'react-router-dom'; // 导入 MemoryRouter
import Wjllogin from './Wjllogin'; // 根据你的文件路径调整
import { wjllogin } from '../axiosAPI/wjl'; // 导入登录 API
import { describe, it, beforeEach, vi } from 'vitest'; // 导入 Vitest 的函数
  • @testing-library/react: 这个库提供了一些函数，用于渲染组件和进行交互测试。
  • MemoryRouter: 这是 React Router 提供的一个组件，用于在测试中模拟路由环境。
  • Wjllogin: 这是被测试的组件，假设它是一个登录表单。
  • wjllogin: 这是一个从 API 模块导入的函数，用于处理登录请求。
  • describe, it, beforeEach, vi: 这些是 Vitest 提供的函数，用于组织测试用例和创建 mock 函数。
vi.mock('../axiosAPI/wjl', () => ({
  wjllogin: vi.fn(),
}));
  • 这里使用 vi.mock 来模拟 wjllogin 函数，以便在测试中控制其返回值，而不实际调用 API。
describe('Wjllogin Component', () => {

}
  • describe 用于将相关的测试用例组织在一起，便于管理和阅读。
beforeEach(() => {
  vi.clearAllMocks();
});
  • beforeEach 在每个测试用例执行之前调用，确保每个测试用例都在干净的状态下运行，避免测试之间的相互影响。

测试用例

it('renders Wjllogin component', () => {
  render(
    <MemoryRouter>
      <Wjllogin />
    </MemoryRouter>
  );

  // Check if elements are rendered
  expect(screen.getByText(/考生姓名:/)).toBeInTheDocument();
  expect(screen.getByText(/身份证号:/)).toBeInTheDocument();
  expect(screen.getByText(/学号:/)).toBeInTheDocument();
  expect(screen.getByRole('button', { name: /登录/i })).toBeInTheDocument();
});
  • 这个测试用例检查 Wjllogin 组件是否能够正确渲染，并且确保特定的文本和登录按钮存在于文档中。
it('successful login', async () => {
  // Mock the API response for a successful login
  wjllogin.mockResolvedValueOnce({
    data: { code: 200, sid: '123', clazz: 'A1', sname: 'John Doe' },
  });

  render(
    <MemoryRouter>
      <Wjllogin />
    </MemoryRouter>
  );

  // Fill in the input fields
  fireEvent.change(screen.getByLabelText(/考生姓名:/), { target: { value: 'John Doe' } });
  fireEvent.change(screen.getByLabelText(/身份证号:/), { target: { value: '123456789012345678' } });
  fireEvent.change(screen.getByLabelText(/学号:/), { target: { value: '2023001' } });

  // Click the login button
  fireEvent.click(screen.getByRole('button', { name: /登录/i }));

  // Wait for the success message to appear
  await waitFor(() => {
    expect(screen.getByText(/登录成功, 即将跳转至主页/)).toBeInTheDocument();
  });

  // Check if sessionStorage is set (you may need to mock sessionStorage)
  expect(sessionStorage.getItem('sid')).toBe('123');
  expect(sessionStorage.getItem('clazz')).toBe('A1');
  expect(sessionStorage.getItem('sname')).toBe('John Doe');
});
  • 这个测试用例模拟了一个成功的登录过程。它首先设置了 wjllogin 函数的返回值，然后渲染组件，填写表单，点击登录按钮，并最终检查成功消息是否出现以及 sessionStorage 是否正确设置。
it('failed login', async () => {
  // Mock the API response for a failed login
  wjllogin.mockResolvedValueOnce({
    data: { code: 400 },
  });

  render(
    <MemoryRouter>
      <Wjllogin />
    </MemoryRouter>
  );

  // Fill in the input fields
  fireEvent.change(screen.getByLabelText(/考生姓名:/), { target: { value: 'Invalid User' } });
  fireEvent.change(screen.getByLabelText(/身份证号:/), { target: { value: '000000000000000000' } });
  fireEvent.change(screen.getByLabelText(/学号:/), { target: { value: '0000000' } });

  // Click the login button
  fireEvent.click(screen.getByRole('button', { name: /登录/i }));

  // Wait for the error message to appear
  await waitFor(() => {
    expect(screen.getByText(/登录失败,请检查姓名、身份证号或学号/)).toBeInTheDocument();
  });
});
  • 这个测试用例模拟了一个失败的登录过程。它设置了 wjllogin 函数的返回值为一个错误代码，然后填写不正确的表单数据，点击登录按钮，并最终检查错误消息是否出现。

这段代码为 Wjllogin 组件提供了全面的测试，包括组件的渲染、成功登录和失败登录的场景。通过使用 Vitest 和 React Testing Library，测试用例能够模拟用户交互并验证组件的行为是否符合预期。 

6、运行测试

通过在终端运行命令 npx vitser 看结果

npx vitest

这里三个测试用例全部通过，说明代码编写没有问题。

标签：登录,screen,单元测试,react18,Wjllogin,import,fireEvent,vite,expect
From： https://blog.csdn.net/m0_59365887/article/details/144065613

相关文章

  • Vite项目怎么进行屏幕适配？
    基于rem的适配方案1、安装依赖npmipostcss-pxtoremautoprefixeramfe-flexible--save-devpostcss-pxtorem是PostCSS的插件，用于将像素单元生成rem单位autoprefixer浏览器前缀处理插件amfe-flexible可伸缩布局方案替代了原先的lib-flexible 选用了当前众多浏览器兼容的......
  • vue+laravel使用微信Natvite支付
    Navite支付介绍Native支付是指商户系统按微信支付协议生成支付二维码，用户再用微信“扫一扫”完成支付的模式。适用于PC网站、实体店单品或订单、媒体广告支付等场景1.先阅读微信支付接入前的准备文档文档连接：Native支付接入前准备2.php下载插件composerrequirewechatpay/we......
  • vite.config.js配置入门详解
    一，搭建vite项目兼容性注意：Vite需要 Node.js 版本14.18+，16+。然而，有些模板需要依赖更高的Node版本才能正常运行，当你的包管理器发出警告时，请注意升级你的Node版本。通过下面的命令行可以创建指定项目名称和你想要使用的模板的vue项目#npm6.xnpmcreatevite@......
  • 【Python】 深入理解Python的单元测试：用unittest和pytest进行测试驱动开发
    《PythonOpenCV从菜鸟到高手》带你进入图像处理与计算机视觉的大门！单元测试是现代软件开发中的重要组成部分，通过验证代码的功能性、准确性和稳定性，提升代码质量和开发效率。本文章深入介绍Python中两种主流单元测试框架：unittest和pytest，并结合测试驱动开发（TDD）的思想，展示如......
  • Vite 优化配置方案
    前言Vite是一个快速的前端构建工具，特别适用于现代前端框架如Vue和React。为了进一步提升项目的性能和开发体验，我们可以对Vite进行一些优化配置。本文将介绍一些常见的优化策略，并提供详细的配置示例和注释。1.安装必要的插件首先，我们需要安装一些常用的Vite插件来帮......
  • Vite配置打包分类文件
    概述vite默认的打包输出目录是dist/assets/目录，所有的js、css、img等资源都会默认输出到该目录下，文件名默认是[name].[hash:8].[filename]。对于小型项目来说，采用默认配置无伤大雅，但是如果工程比较大，就可以考虑将打包后的文件分类存放在不同目录下。具体配置vite是基于......
  • electron-vite_4使用WebContentsView快速集成已有项目
    Web嵌入官方推荐使用WebContentsView；集成也比较简单，但还是需要你单独写点东西；src/main/index.ts进行修改import{app,shell,BrowserWindow,ipcMain,nativeImage,WebContentsView,dialog}from'electron';functioncreateWindow():void{//1.创建br......
  • electron-vite_6js-cookie失效
    我们项目是用了js-cookie，后续集成的时候发现，无法进入首页；经过排查是js-cookie无法使用，可能是electron打包后的项目运行的时候是file:///猜测原因：因为Cookie是与域名相关联的，而file:///协议没有域名，因此Cookie可能无法正常工作。file:///C:/Users/Administrator/AppData/......
  • vue3--vite环境变量的配置
    在开发环境、测试环境、生产环境需要请求不同的接口，对应不同的数据。因此，配置环境变量也尤为重要第一：为项目根目录开发、测试、生成（也可以加入预发布）环境创建.env文件.env.development.env.production.env.test第二：配置数据#变量必须以VITE_为前缀才能暴露给外部读取......
  • Vite和Wabpack进行打包项目
    问题：首先，咱们为什么要打包？答案：打包（Packaging）是软件开发中的一个重要步骤，主要目的是将开发好的代码和依赖项打包成一个可分发和运行的格式。关键原因：依赖管理、环境隔离、便于分发、版本控制、安全性、性能优化、部署简化在不同的编程语言和框架中，打包工具和方法可能会有所不......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99