react 单元测试入门

2019-11-02 18:22:25

字体：大中小

来源：转载

供稿：网友

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

上一篇：【推荐】Bootstrap相关优质项目

下一篇：图文并茂！8 张 Gif 图学会 Flexbox