1 min read

React.js 测试

你写了一个 React.js 的组件,现在打算给组件写测试代码,怎么写?

react.js 官方提供了一个 Test Utilities,有两种用法:

  1. 渲染到 DOM 后再测试 – renderIntoDocument
  2. 只是生成组件的一个实例,然后对测试该实践 – 即文档中所说的 Shallow rendering

这里介绍第二种用法,全部测试代码见我 github 上的 react 日期组件库

用到的工具有:

  1. mocha – 测试框架
  2. Chai – 断言库
  3. babeljs – 用于编译 jsx 文件

以下测试代码经常简化,并加上注释说明:

// 导入 React,这个 React 附带 addons
import React from 'react/addons'; 

// 从 `chai` 包中导入 `expect`
import {expect} from 'chai'; 

// 导入要测试的 react 组件
import Week from '../src/week'; 

describe('Week component', function() {
    let {TestUtils} = React.addons; // ES6 写法
    let shallowRenderer = TestUtils.createRenderer();

    // 使用 react 的 测试方法渲染 react 组件
    shallowRenderer.render(<Week days={[undefined, undefined, 1, 2, 3, 4, 5]} selectDay={function(){}} highlight={true} day={1}/>);
    let week;
    before('return Week component', () => {

        // 从渲染的组件中返回结果
        week = shallowRenderer.getRenderOutput();

        // 你可以通过 console.log(week) 来查看 week 对象的结构
    });

    // 以下是测试
    it('should have tr as container', () => {
        expect(week.type).to.equal('tr');
    });
    it('should have 7 td children', () => {
        expect(week.props.children.length).to.equal(7);
    });
    // ...
});

如果你对写测试的必要性不敢确定 – 我知道绝大部分前端开发都不写测试的,可以看看这一篇单元测试的十二个理由

报告问题 修订

如果你有自建 https 代理的需求,欢迎尝试 Phantom,一键搭建,方便快捷。查看 demo