react-app 编写测试
单元测试(unit testing)指的是以软件的单元(unit)为单位,对软件进行测试。单元可以是一个函数,也可以是一个模块或组件。它的基本特征就是,只要输入不变,必定返回同样的输出。
单元测试的步骤如下
准备所有的测试条件
it('test a')
it('test b')
调用(触发)所要测试的函数
it('test a', ()=>{/*expect*/})
it('test b', ()=>{/*expect*/})
验证运行结果是否正确
npm t
还原被修改的记录
开发模式
TDD
先写好测试,然后再根据测试完成开发
BDD
针对行为写测试,软件应该怎样运行。
安装环境
yarn create react-app my-app
yarn run eject
yarn
yarn add enzyme enzyme-adapter-react-16 --dev
npm t 启动测试
浅层渲染 api
import React, { Component, Fragment } from 'react';
import logo from './logo.svg';
import './App.css';
class App extends Component {
state = {
v: 'welcome to react test.'
}
render() {
const { v } = this.state;
return <Fragment>
<h1>{v}</h1>
<button onClick={this.handleChangeV}>add</button>
</Fragment>
}
handleChangeV = e => {
this.setState({
v: 'ok'
})
}
}
export default App;
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import Enzyme, {shallow} from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
Enzyme.configure({adapter: new Adapter()})
const l = console.log
describe('<App /> 组件测试', () => { // 测试套件
let app;
beforeAll(() => {
app = shallow(< App />)
})
it('exists h1', () => { // 测试用例
// 断言组件中存在 h1元素
expect(app.exists('h1')).toBe(true) // 断言
});
it('only one h1', () => {
// 断言只存在一个 h1袁元素
expect(app.find('h1').length).toBe(1)
})
it('check h1 content', () => {
expect(app.find('h1').html()).toContain('welcome to react test.')
})
it('click change', () => {
app.find('button').simulate('click') // 模拟点击事件
expect(app.find('h1').html()).toContain('ok')
// expect(app.find('h1').html()).toContain('hello') Error
})
})