react 单元测试入门

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');
    });
});

相关文章

一、前言 在组件方面react和Vue一样的,核心思想玩的就是组件...
前言: 前段时间学习完react后,刚好就接到公司一个react项目...
前言: 最近收到组长通知我们项目组后面新开的项目准备统一技...
react 中的高阶组件主要是对于 hooks 之前的类组件来说的,如...
我们上一节了解了组件的更新机制,但是只是停留在表层上,例...
我们上一节了解了 react 的虚拟 dom 的格式,如何把虚拟 dom...