1.引入react-addons-test-utils
2.引入断言器 chai
3.安装mocha
4.运行测试(mocha –compilers js:babel-core/register )
需要配置mocha 支持es6及jsx,mocha 自动执行test文件夹下的所有测试用例
babel配置
- {
- "presets": [ "es2015",'react' ] }
参考文档:http://www.ruanyifeng.com/blog/2016/02/react-testing-tutorial.html
http://www.ruanyifeng.com/blog/2015/12/a-mocha-tutorial-of-examples.html
最简单demo
- import TestUtils from 'react-addons-test-utils';
- import { expect } from 'chai';
-
- import React,{Component} from 'react';
- import ReactDOM from 'react-dom';
-
- class App extends Component {
- render() {
- return <h1>test</h1>
- }
- }
-
- function shallowRender(Component) {
- const renderer = TestUtils.createRenderer();
- renderer.render(<Component/>);
- return renderer.getRenderOutput();
- }
- describe('Shallow Rendering',function () {
- it('App\'s title should be Todos',function () {
- const app = shallowRender(App);
- expect(app.props.children[0].type).to.equal('h1');
- expect(app.props.children[0].props.children).to.equal('test');
- });
- });