使用 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用法相关推荐

  1. 基于React开发范式的思考：写在Lesx发布之际

    例子:lesx-example webpack loader: lesx-loader 一些背景 现在前端框架已经呈现出React.Angular.Vue三足鼎立的局势,对于三者的对比以及技术选型的思 ...

  2. 基于Ant Design UI框架的React项目

    概述 这款基于React开发的UI框架,界面非常简洁美观,在这篇文章中我主要为大家介绍一下如何用Ant开始搭建React项目 详细 代码下载:http://www.demodashi.com/demo ...

  3. Next.js提供了基于React的简单通用JavaScript框架

    新的通用JavaScript框架Next.js目前已经开源了,它为基于React和服务器的Web应用提供了一个新的可选方案. \\ 来自Zeit的团队在React的基础和组件模型上构建了Next.js ...

  4. 从零开始搭建一套完整的基于 React 框架的 H5 项目「下载即用、收藏不亏」

    最近需要新开一个基于 React 移动端的项目.由于网上完整的 H5 初始化项目比较少,所以在此总结一下如何从 0-1 开发一套基于 React 框架的 H5 初始化项目,下载就可以直接进行开发,欢迎 ...

  5. 开发html5单页用什么框架,GitHub - mmcai/single-page-react-h5: 基于React框架的单页活动框架，可以基于此代码上进行相关的H5活动等相关内容的开发...

    single-page-react-h5 基于React的H5活动页面脚手架,助力你在1小时就可以完成一个H5活动页面,这里已经帮您做了如下几个基本事情 页面缩放,基于宽度为750px的视觉稿,当然您 ...

  6. 基于 react, redux 最佳实践构建的 2048

    前段时间 React license 的问题闹的沸沸扬扬,搞得 React 社区人心惶惶,好在最终 React 团队听取了社区意见把 license 换成了 MIT.不管 React license ...

  7. 从零搭建React全家桶框架教程

    从零搭建React全家桶框架教程 源码地址:https://github.com/brickspert/react-family 欢迎star 提问反馈:blog 原文地址:https://githu ...

  8. React Native移动框架功能研究

    React Native移动框架功能研究 此篇只研究React Native框架的功能. 一.React Natvie是什么 React Native是使用React(或者说JS)来开发原生APP的框 ...

  9. 实例讲解基于 React+Redux 的前端开发流程

    前言:在当下的前端界,react 和 redux 发展得如火如荼,react 在 github 的 star 数达 42000 +,超过了 jquery 的 39000+,也即将超过前几年比较火的an ...

最新文章

  1. 关于微软研究院（谢幸、郑宇研究员主导的）“智能城市”“智能生活”研究的一个归纳...
  2. Spring JPA 开启原生sql打印
  3. domino升级-602-651-851
  4. Matlab的不同进制转换
  5. 数据集成之主数据管理(转载整理)
  6. linux 网卡 巨帧,Linux Kernel e1000e驱动巨型帧处理绕过安全检查漏洞
  7. Netweaver里某个software component和C4C的版本
  8. c#+web与php,将Web服务客户端从c#转换为php
  9. c#分页读取GB文本文件
  10. js字符串转换为json对象JSON.parse()及将json对象转为json字符串JSON.stringify()
  11. 4.MySQL优化---多表查询优化
  12. 全网最全 Chrome浏览器插件推荐大全 持续更新中
  13. 关于对话机器人，你需要了解这些技术
  14. 全拼到缩写月份单词python_月份的英文缩写及全名
  15. helm charts 入门指南
  16. re.compile(r'xxx')中的r是什么意思
  17. 人工智能方向毕业设计_人工智能时代，理工科专业的毕业设计都被安排了
  18. w7计算机删除图标不见了怎么办,win7小电脑图标不见了怎么办
  19. Poisoning the Unlabeled Dataset of Semi-Supervised Learning毒害半监督学习的无标记数据集
  20. 第3章 栈和队列 练习题

热门文章

  1. Refused to execute inline script because it violates the following Content Security Policy directive
  2. 双向长短期记忆网络（BiLSTM）详解
  3. 【挨踢人物传】小侠唐在飞：“剑胆琴心，成就网络大侠”（第四期）
  4. Instagram密友名单与私密账户的区别
  5. 模型泛化能力是什么意思
  6. 《50个教育法：我把三个儿子送入了斯坦福》书中的精髓：了解教育的本质，以言传身教、耐心引导的教育方式培养孩子成才。
  7. 【Linux】进程状态（阻塞、挂起、僵尸进程）
  8. Linux学习：Linux启动管理器GRUB2
  9. [收藏]一些电平转换方法
  10. java 图片互转_JAVA 图片格式转换 jpg、jpeg、png格式互转