create-react-app zf-react-test
cd zf-react-test
npm test
sum.js
module.exports = function(a,b){
return a+b;
}
sum.spec.js
let sum = require('./sum');
it('a+b',function(){
expect(sum(1,2)).toBe(3);
});
cnpm i enzyme enzyme-adapter-react-16 -D
TodoInput.js
import React, { Component } from 'react';
class TodoInput extends Component {
render() {
return (
<div>
<h3>待办事项</h3>
<input defaultValue="请输入"/>
</div>
);
}
}
export default TodoInput;
TodoInput.spec.js
import React from 'react';
import Enzyme,{shallow} from 'enzyme';
import TodoInput from './TodoInput';
import Adapter from 'enzyme-adapter-react-16';
Enzyme.configure({adapter:new Adapter()});
//http://airbnb.io/enzyme/docs/api/ShallowWrapper/find.html
//http://airbnb.io/enzyme/docs/api/selector.html
it('shoud render 请输入',function(){
const wrapper = shallow(<TodoInput/>);
const h3 = wrapper.find('h3');
const input = wrapper.find('input');
expect(h3.text()).toBe('待办事项');
expect(input.props().defaultValue).toBe('请输入');
});
src\components\TodoList.js
static propTypes = {
todos:PropTypes.arrayOf(PropTypes.shape({
text:PropTypes.string.isRequired,
createAt:PropTypes.object.isRequired
}))
}
import React from 'react';
import Enzyme,{shallow} from 'enzyme';
import TodoInput from './TodoInput';
import Adapter from 'enzyme-adapter-react-16';
Enzyme.configure({adapter:new Adapter()});
//http://airbnb.io/enzyme/docs/api/ShallowWrapper/find.html
//http://airbnb.io/enzyme/docs/api/selector.html
describe('测试TodoInput',function(){
let todos;
beforeEach(()=>{
todos =[{text:'1'},{text:'2'}];
});
it('shoud render 请输入',function(){
let wrapper = shallow(<TodoInput/>);
const h3 = wrapper.find('h3');
const input = wrapper.find('input');
expect(h3.text()).toBe('待办事项');
expect(input.props().defaultValue).toBe('请输入');
});
it('点击按钮的时候调用addTodo方法',function(){
let addTodo = jest.fn();
let wrapper = shallow(<TodoInput addTodo = {addTodo}/>);
let button = wrapper.find('button');
button.simulate('click');
expect(addTodo).toBeCalled();
});
});
let reducer = require('./reducer');
const ADD_TODO = 'ADD_TODO';
const DEL_TODO = 'DEL_TODO';
describe('reducer',()=>{
let INIT_STATE = [{id:1,text:'1'},{id:2,text:'2'}];
it('初始状态',()=>{
expect(reducer(undefined,{})).toEqual(INIT_STATE);
});
it('增加todo',()=>{
let todos = reducer(INIT_STATE,{type:ADD_TODO,todo:{id:3,text:'3'}});
expect(todos).toEqual([...INIT_STATE,{id:3,text:'3'}]);
});
it('删除todo',()=>{
let todos = reducer(INIT_STATE,{type:DEL_TODO,id:2});
expect(todos).toEqual([{id:1,text:'1'}]);
});
});
const ADD_TODO = 'ADD_TODO';
const DEL_TODO = 'DEL_TODO';
let INIT_STATE = [{id:1,text:'1'},{id:2,text:'2'}];
function reducer(state=INIT_STATE,action={}){
switch(action.type){
case ADD_TODO:
return [...state,action.todo];
case DEL_TODO:
return state.filter(item=>item.id != action.id);
default:
return state;
}
}
module.exports = reducer;
import React from 'react';
import Enzyme,{shallow} from 'enzyme';
import TodoItem from './TodoItem';
import Adapter from 'enzyme-adapter-react-16';
import { wrap } from 'module';
Enzyme.configure({adapter:new Adapter()});
//http://airbnb.io/enzyme/docs/api/ShallowWrapper/find.html
//http://airbnb.io/enzyme/docs/api/selector.html
describe('TodoItem',function(){
it('todo',()=>{
const wrapper = shallow(<TodoItem todo={{id:1,text:'1'}}/>);
expect(wrapper.text()).toMatch(/1/);
expect(wrapper.hasClass('todo')).toBe(true);
expect(wrapper.hasClass('todo-selected')).toBe(false);
});
it('todo-selected',()=>{
const wrapper = shallow(<TodoItem todo={{id:1,text:'1'}}/>);
expect(wrapper.text()).toMatch(/1/);
wrapper.simulate('click');
expect(wrapper.hasClass('todo')).toBe(false);
expect(wrapper.hasClass('todo-selected')).toBe(true);
});
});
mount将React组件加载为真实的DOM
import React from 'react';
import Enzyme,{mount} from 'enzyme';
import TodoApp from './TodoApp';
import Adapter from 'enzyme-adapter-react-16';
Enzyme.configure({adapter:new Adapter()});
describe('TodoApp',function(){
it('addTodo',()=>{
let wrapper = mount(<TodoApp/>);
let len = wrapper.find('li').length;
wrapper.find('button').at(0).simulate('click');
expect(wrapper.find('li').length).toBe(len + 1);
});
it('delTodo',()=>{
let wrapper = mount(<TodoApp/>);
let len = wrapper.find('li').length;
wrapper.find('button').at(1).simulate('click');
expect(wrapper.find('li').length).toBe(len - 1);
});
});