jest + enzyme测试react组件
时间:2020-01-09
本文章向大家介绍jest + enzyme测试react组件,主要包括jest + enzyme测试react组件使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
1、demo结构
2、项目搭建
创建项目:create-react-app jest_4
package.json
{ "name": "jest_4", "version": "0.1.0", "private": true, "dependencies": { "@testing-library/jest-dom": "^4.2.4", "@testing-library/react": "^9.3.2", "@testing-library/user-event": "^7.1.2", "react": "^16.12.0", "react-dom": "^16.12.0", "react-scripts": "3.3.0" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "jest --colors --coverage", "eject": "react-scripts eject" }, "devDependencies": { "@babel/core": "*", "@babel/plugin-proposal-class-properties": "*", "@babel/preset-env": "*", "@babel/preset-react": "*", "babel-jest": "*", "enzyme": "*", "enzyme-adapter-react-16": "*", "jest": "*" }, "eslintConfig": { "extends": "react-app" }, "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] } }
.babelrc.js
module.exports = { presets: ['@babel/preset-env', '@babel/preset-react'], plugins: ['@babel/plugin-proposal-class-properties'] };
index.js
import React from 'react' import ReactDOM from 'react-dom' import Home from './components/Home.jsx' ReactDOM.render(<Home />, document.getElementById('root'))
Home.jsx
import React from 'react' export default class Home extends React.Component { static defaultProps = { title: 'jest + enzyme demo', value: 0 } constructor(props) { super(props) const { title, value } = props this.state = { title, value } } componentWillReceiveProps(newProps) { const { title, value } = newProps this.setState({ title, value }) } render() { const { title, value } = this.state return ( <div> <h1>{title}</h1> <div className='show-value'>value = {value}</div> <input value={value} onChange={this.changeHandler} /> <button onClick={this.add}>Value++</button> </div> ) } add = () => { this.setState({ value: parseInt(this.state.value) + 1 }) } changeHandler = e => { this.setState({ value: e.target.value }) } }
__tests__/Home-test.js
import React from 'react'; import Enzyme, {mount} from 'enzyme'; import Adapter from 'enzyme-adapter-react-16'; import Home from '../src/components/Home.jsx'; Enzyme.configure({adapter: new Adapter()}); describe('UI test #home', () => { it('shoule have title', () => { const wrapper = mount(<Home />) const title = wrapper.find('h1') expect(title).toHaveLength(1) }) it('should add 1 when click button', () => { const wrapper = mount(<Home />) const showValue = wrapper.find('.show-value') const inputOldValue = parseInt(showValue.text()) // 模拟button点击事件 wrapper.find('button').simulate('click') const inputCurrentValue = parseInt(showValue.text()) expect(inputCurrentValue).toBe(inputOldValue + 1) }) it('should change to the input value when input a number', () => { const wrapper = mount(<Home />) const showValue = wrapper.find('.show-value') // 模拟监听input输入框的change事件 wrapper.find('input').simulate('change', { target: { value: '5' } }) expect(showValue.text()).toBe("value = 5") }) it('should change when props change', () => { const wrapper = mount(<Home title="aaa"/>) const title = wrapper.find('h1') expect(title.text()).toBe('aaa') wrapper.setProps({ title: 'bbb' }) expect(title.text()).toBe('bbb') }) })
3、测试
执行npm test
参考:
2) https://github.com/facebook/jest/tree/master/examples/enzyme
原文地址:https://www.cnblogs.com/xy-ouyang/p/12172137.html
- JavaScript之JS的执行环境和作用域
- GOF设计模式快速学习
- JavaScript之面向对象学习一
- JavaScript之JS实现动画效果
- 深入入门系列--Data Structure--04树
- SQL学习之高级联结(自联结、自然联结、外联接)
- ExtJs学习笔记(21)-使用XTemplate结合WCF显示数据
- JavaScript之面向对象的概念,对象属性和对象属性的特性简介
- 快速入门系列--WebAPI--04在老版本MVC4下的调整
- SQL学习之SELECT子句顺序
- [图解]sqlserver中创建链接服务器
- 人工智能时代来临,还在炫耀孩子能考100分?
- 2017:谷歌DeepMind团队的年度回顾
- SQL学习之组合查询(UNION)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 在Python中创建命令行界面的最佳方式
- Diels-Alder反应的区域选择性分析
- 传说中的画图神器Plotnine,Python中的ggplot2
- 用ORCA做结构优化及轨迹查看
- 前端兼容之痛
- 离线安装PySCF程序(1.5及更高版本)
- Python Debug(调试)的终极指南
- Linux下做计算常用的别名alias推荐
- 离线安装支持Intel MKL的R-3.6
- Dalton使用——磷光及其相关过程
- 【赵渝强老师】Flink的Watermark机制(基于Flink 1.11.0实现)
- 在Windows CMD里“使用”常见Linux命令
- 什么是Python中的Dask,它如何帮助你进行数据分析?
- a[i] = i++ 到底对不对?
- 如何监视Python程序的内存使用情况