React Jest + enzyme 配置及简单用例

2024-06-04 02:03:14

这里简单的介绍一下 React 项目下 Jest + enzyme 配置并运行一个简单的测试用例。
这里跳过React项目的创建,React项目创建可以看下 React项目创建

1.安装 jest enzyme相关依赖

npm i jest babel-jest --save-dev

jest:主要code ,
babel-jest: 让jest可以支持ES6的语法

npm i enzyme enzyme-adapter-react-16 jest-enzyme --save-dev

enzyme:主code
enzyme-adapter-react-16: 支持 React16系列的版本。React其他版本
jest-enzyme: 封装了测试模块的插件提供了简洁的API接口

2.配置 jest

根目录下 package.json 中添加:

"jest": {"setupFilesAfterEnv": ["./node_modules/jest-enzyme/lib/index.js"]},

setupFilesAfterEnv:表示每次跑具体测试代码之前会先运行的文件。官方说明

3.新建测试文件

3.1 根目录下新建 test 文件夹(目录结构跟 src同层)
3.2 test 目录下新建 enzyme.config.js 文件

添加下面内容:

import Adapter from "enzyme-adapter-react-16";
import Enzyme from "enzyme";Enzyme.configure({ adapter: new Adapter() });export default Enzyme;

这里只是为了其他地方方便引入。
3.3 test目录下新建 enzyme.test.js 测试文件
添加下面内容:

import React from "react";
import Enzyme from "./enzyme.config";
import App from "../src/App"; //组件,这里可以替换成自己组件位置
const { shallow } = Enzyme;describe('<App />',()=>{it('Test App EmptyRender',()=>{const wrapper = shallow(<App />);expect(wrapper).not.toBeEmptyRender();})
})

这里只是列举了一个API。其他API

4.添加运行命令, 运行测试

根目录 package.json 中添加

"scripts": {"test": "jest --colors --coverage"},

如果之前 “scripts”:{} 中有内容就直接添加 “test”: “jest --colors --coverage”
“scripts”:{“xxx”:xxxx,“test”: “jest --colors --coverage”}

命令行输入

npm run test

如果你看到类似下面都是passed的结果恭喜你自动测试通过了:

React Jest + enzyme 配置及简单用例相关推荐

Jest enzyme 进行react单元测试
下面的文章会默认读者了解 React及其技术栈以及基本的前端单元测试,由于本文涉及到的技术较多,故不宜一一在文中介绍,谅解. 写在前面在撰写单元测试用例之前,我们需要了解到撰写测试用例的原因.写测试 ...
Jest + Enzyme React 组件测试实践
≈ 最近把组件测试接入到日常开发,提高了项目代码健壮性,可维护性.本人也从0到1收获了组件测试的经验. 本文总结一下最近两周组件测试相关的研究,包括: Jest + Enzyme 的基本介绍 Je ...
react 单元测试 (jest+enzyme)
react 单元测试 (jest+enzyme) 为什么要做单元测试作为一个前端工程师,我是很想去谢单元测试的,因为每天的需求很多,还要去编写测试代码,感觉时间都不够用了. 不过最近开发了一个比较复 ...
React单元测试：Jest+Enzyme
一.概述本文介绍基于Jest+Enzyme的React单元测试编写方法,包括对组件.action.reducer和其他工具类和功能类js的测试.主要介绍对组件.action.reducer代码的单元 ...
react jest测试_如何设置Jest和Enzyme来测试React Native应用
react jest测试 by Sam Ollason 通过萨姆·奥拉森(Sam Ollason) This short article shares my experiences setting u ...
【Flask框架】一. Flask框架初体验（配置环境 + 简单demo样例）
文章目录一. Flask框架初体验(配置环境 + 简单demo样例) 虚拟环境新建项目将Pycharm改为FLASK_DEBUG模式修改FLASK_DEBUG模式的步骤配置文件简单用法 U ...
搭建 Jest+ Enzyme 测试环境
1.为什么要使用单元测试工具? 因为代码之间的相互调用关系,又希望测试过程单元相互独立,又能正常运行,这就需要我们对被测函数的依赖函数和环境进行mock,在测试数据输入.测试执行和测试结果检查方面存在 ...
react jest测试_如何使用React测试库和Jest开始测试React应用
react jest测试 Testing is often seen as a tedious process. It's extra code you have to write, and in s ...
react jest测试_如何使用Jest和react-testing-library测试Socket.io-client应用程序
react jest测试 by Justice Mba 由Mba法官如何使用Jest和react-testing-library测试Socket.io-client应用程序 (How to test ...

最新文章

热门文章