基于React的Alita框架的jest用法
2024-06-18 17:41:29
使用 alita/test 测试
简介
在前端开发的时候，可能会写到很多组件，将这多个组件进行封装已做于后期业务的开发。再将这些组件开源供其他开发人员使用，逐渐发现会出现这样那样的 Bug ，这个时候就需要写测试，测试每个已经开发的组件，是否完善。
本次测试是在 alita 框架的基础上，进行测试。
环境的搭建
1、创建 alita 项目
命令： yarn create alita 项目名
2、切换到项目目录，安装依赖
命令：yarn install
3、下载 alita/test 依赖包
命令：yarn add @umijs/test @alita/test --dev
4、配置 package.json 文件
在 package.json 里面加入两行命令，具体如下
{..."scripts":{..."test": "umi-test","test:coverage": "umi-test --coverage",...}...
}
二、编写测试 demo
1、目录结构
├── src
│ └── pages
│ ├── index
| ├──index.less
| ├──index.tsx
| ├──service.ts
│ └── app.ts
├── node_modules
├── package.json
├── public
......
现在的目录结构如上所示，我们要在 index 文件下，建立一个 index.test.tsx 文件
2、编写 index.test.tsx 文件,证明环境没有问题
test("this is testDemi", () => {expect(2 + 2).toBe(4)
})
在终端输入命令： yarn test 截图如下
三、语法学习
进入关键的知识学习了，前面死板地粘贴复制就可以了，现在要讲知识点了！！！划重点划重点~~~
1、语法小知识
- 只要以
.test.js||.test.jsx||.test.ts||.test.tsx结尾，jest 自动化测试会自动找到这个文件，不用额外的处理 - test 方法是 jest 提供的一个方法，接受两个参数，第一个参数是描述，第二个参数是函数，执行的判断方法
- expect() 传入的值是函数根据某个例子运行的结果，再利用匹配器进行判断是否一致
2、单元测试术语解析
代码片段：
describe("number test", ()=>{it('1 is true', ()=>{expect(1).toBeTruthy()})test('2 is true',()=>{expect(2).toBeTruthy()})
})
- describe 描述,
decribe会形成一个作用域 - it 断言
- expect 期望
- test 测试，类似
it
3、挂载 dom 节点
使用 @alita/test 中的 render 方法进行渲染测试
(1)编写 inde 文件夹里面的 index.tex
import React, { FC } from 'react';
import styles from './index.less';const HomePage: FC = () => (<><div className={styles.center}>Hello</div><div>欢迎学习测试</div></>
);export default HomePage;
(2)在 index 文件夹里面创建 index.test.tsx 页面
编写测试内容如下：
// 导入 render 方法
import { render } from '@alita/test'
import React from 'react'
import Page from './index'it('page text', async () => {// 采用 render 方法挂载节点（划重点）const { getByText } = render(<Page></Page>)expect(getByText("欢迎学习测试")).toBeDefined()
})
4、运行测试用例
（1）使用 yarn test 命令
(2)使用 yarn test:coverage 命令
(3)使用 yarn test +测试文件的相对路径 命令
四、知识拓展
1、匹配器
- 在此代码中
expect (2 + 3)返回一个"期望"的对象 - 在此代码中，
.toBe(4)就是一个匹配器 toBe用来测试精确相等，此外还有很多匹配器
//代码直接粘贴复制到.test.tsx结尾的文件或其他测试文件就可以了
test('two plus two is four', () => {expect(2 + 3).toBe(5);
});
（1）针对 number 类型：
//代码直接粘贴复制到.test.tsx结尾的文件或其他测试文件就可以了
// 针对number类型
test("number test", async () => {// 期望值比匹配器大expect(2 + 3).toBeGreaterThan(4.5);expect(2 + 3).toBeGreaterThanOrEqual(5);// 期望值比匹配器小expect(2 + 3).toBeLessThan(6);expect(2 + 3.5).toBeLessThanOrEqual(5.5);expect(2 + 3).toBe(5);expect(2 + 3).toEqual(5);// 浮点数使用toBeCloseTo进行匹配，不用toEqualexpect(0.1 + 0.2).toBeCloseTo(0.3);
})
（2）针对 string 类型
//代码直接粘贴复制到 .test.tsx 结尾的文件或其他测试文件就可以了
// 字符串的匹配
test('string test', async () => {// toMatch 可以使用正则表达式去匹配字符串expect('team').toMatch(/t/);
})
（3）针对数组类型：
//代码直接粘贴复制到.test.tsx结尾的文件或其他测试文件就可以了
// 数组类型匹配
test('Array test', async () => {const shoppingList = ['apple','banana','orange','watermelon','hami',];expect(shoppingList).toContain('orange');expect(new Set(shoppingList)).toContain('banana');
})
（4）针对方法是否执行：
//测试代码在第三点
const onFinish = jest.fn();
const { getByText, getAllByText } = render(//Submit文本按钮上，绑定了一个触发事件<BasicTest onFinish={onFinish} />
);
//点击触发事件
fireEvent.click(getByText('Submit'));
//判断是否触发`onFinish`事件，未触发则报错
expect(onFinish).toBeCalled();
（5）另外还有：
//测试代码在第三点
//判断 dom 节点有 class 的 `radio-wrapper-checked` 属性
expect(getAllByText("男")[1]).toHaveClass("radio-wrapper-checked"
)
//判断 dom 节点存在
expect(getByText("确定")).toBeDefined()
//使用 .not 将匹配器反转
expect(2+3).not.toBe(6);
expect(getByText("取消")).not.toBeDefined()
2、模拟点击事件、 input 输入事件(测试代码在第三点)：
//点击'百元'内容的 dom 节点
fireEvent.click(getByText('百元'));
//获取 input 标签输入'10'的容
//getByLabelText 方法是获取 aria-label 属性为 'minLength' 的 input 标签
fireEvent.change(getByLabelText('minLength'), { target: { value: '10' } });
3、测试小代码
(1) index.tsx 代码：
import React, { FC } from 'react';interface FunctionPageProps {onFinish: any;
}
const Function: FC<FunctionPageProps> = ({ onFinish }) => {const [str, setStr] = React.useState("")return (<><div className="testDemo"><input type="text"aria-label="myInput"onChange={(e: any) => { setStr(e.target.value) }}/><button type='button' className="myBut" onClick={() => { console.log(str); onFinish() }}>consoleLog</button><div>您输入的内容是：{str}</div></div></>);
};export default Function;(2) index.test.tsx 代码：
import { render, fireEvent, waitFor, testA11y } from '@alita/test'
import React from 'react'
import Page from './index'test("function test", async () => {// 赋值一个 jest 的方法const onFinish = jest.fn();const { container, getByText, getByLabelText } = render(<Page onFinish={onFinish} />);await testA11y(container);// 判断内容为 'consoleLog' 的节点存在expect(getByText('consoleLog')).toBeDefined();// 判断内容为 'consoleLog' 的节点 class 属性含有 'myBut'expect(getByText('consoleLog')).toHaveClass('myBut');// 判断内容为'consoleLog' 的节点 class 属性不含有 'But'expect(getByText('consoleLog')).not.toHaveClass('But');// 获取 dom 树里面的 input 标签const input: any = getByLabelText('myInput')// 修改 input 标签里面的 value 值fireEvent.change(input, { target: { value: '函数测试' } })await waitFor(() => {expect(getByText('您输入的内容是：函数测试'))})// 点击内容为 'consoleLog' 的按钮fireEvent.click(getByText('consoleLog'))// 等待响应await waitFor(() => {// 判断 onFinish 方法执行了一次expect(onFinish).toBeCalled()})
})五、 最后说一下
- 所有测试代码存放在：https://github.com/linjyuan/studyTest
- 匹配器可参考jest官方文档：https://www.jestjs.cn/docs/using-matchers
基于React的Alita框架的jest用法相关推荐
- 基于React开发范式的思考：写在Lesx发布之际
例子:lesx-example webpack loader: lesx-loader 一些背景 现在前端框架已经呈现出React.Angular.Vue三足鼎立的局势,对于三者的对比以及技术选型的思 ...
- 基于Ant Design UI框架的React项目
概述 这款基于React开发的UI框架,界面非常简洁美观,在这篇文章中我主要为大家介绍一下如何用Ant开始搭建React项目 详细 代码下载:http://www.demodashi.com/demo ...
- Next.js提供了基于React的简单通用JavaScript框架
新的通用JavaScript框架Next.js目前已经开源了,它为基于React和服务器的Web应用提供了一个新的可选方案. \\ 来自Zeit的团队在React的基础和组件模型上构建了Next.js ...
- 从零开始搭建一套完整的基于 React 框架的 H5 项目「下载即用、收藏不亏」
最近需要新开一个基于 React 移动端的项目.由于网上完整的 H5 初始化项目比较少,所以在此总结一下如何从 0-1 开发一套基于 React 框架的 H5 初始化项目,下载就可以直接进行开发,欢迎 ...
- 开发html5单页用什么框架,GitHub - mmcai/single-page-react-h5: 基于React框架的单页活动框架，可以基于此代码上进行相关的H5活动等相关内容的开发...
single-page-react-h5 基于React的H5活动页面脚手架,助力你在1小时就可以完成一个H5活动页面,这里已经帮您做了如下几个基本事情 页面缩放,基于宽度为750px的视觉稿,当然您 ...
- 基于 react, redux 最佳实践构建的 2048
前段时间 React license 的问题闹的沸沸扬扬,搞得 React 社区人心惶惶,好在最终 React 团队听取了社区意见把 license 换成了 MIT.不管 React license ...
- 从零搭建React全家桶框架教程
从零搭建React全家桶框架教程 源码地址:https://github.com/brickspert/react-family 欢迎star 提问反馈:blog 原文地址:https://githu ...
- React Native移动框架功能研究
React Native移动框架功能研究 此篇只研究React Native框架的功能. 一.React Natvie是什么 React Native是使用React(或者说JS)来开发原生APP的框 ...
- 实例讲解基于 React+Redux 的前端开发流程
前言:在当下的前端界,react 和 redux 发展得如火如荼,react 在 github 的 star 数达 42000 +,超过了 jquery 的 39000+,也即将超过前几年比较火的an ...
最新文章
- Linux常用命令简述--wc
- Codeforces Round #556 (Div. 2)
- linux内存管理与设计,深入理解Linux内存管理机制（一）
- CV公开课报名 | 快速搭建基于Python的车辆信息识别系统
- activiti实战系列 并行网关(parallelGateWay)
- 项目打包去掉调试时的NSLog、print
- C++ STL快速入门
- nginx+php+mysql+erlang+mongo环境安装
- Javascript Throttle Debounce
- 程序员误区1：软件开发职业是青春饭
- 音视频之RTSP协议简介
- python获取路径时，如果要想使用外部定义的字符串变量，需要注意（附带isfile）
- 一张图搞懂美国大数据产业(上)
- 60天使用百词斩背单词的感想
- 财务报表学习笔记(1)
- html表格(网页里制作表格)
- 【VBA】Excel拆分表格，并且复制格式
- 面向Web开发人员和网站管理员的Web缓存指南
- python matplotlib的常见参数以及画图示例
- 公交换乘GIS地图应用解决方案