You are viewing the documentation for an older version of Preact. Switch to the current version.

使用Enzyme来编写单元测试

React提供了react-addons-test-utils来测试组件，而Airbnb开发的enzyme则让这个更进一步，提供了多种渲染模式和其他有用的特性。多亏了preact-compat-enzyme这个模块，在preact-compat基础之上实现了必要的React的内部属性，这让使用enzyme来测试preact的组件成为可能。

安装

我们需要下面的两个包:

preact-compat-enzyme: 提供enzyme所需要的React的内部属性。

preact-test-utils: 提供了enzyme所需要的react-addons-test-utils中的部分功能

npm install --save-dev preact-compat-enzyme preact-test-utils

配置

使用karma来进行测试服务的启动。我们需要在karma的webpack aliases的加入下面的alias。

{
  "resolve": {
    "alias": {
        "react-dom/server": "preact-render-to-string",
        "react-addons-test-utils": "preact-test-utils",
        "react": "preact-compat-enzyme",
        "react-dom": "preact-compat-enzyme"
    }
  }
}

限制

目前使用enzyme仅仅支持mount模式。
在执行React Wrapper的setProps或者setState方法时候，需要使用setTimeout方法对断言进行包裹。

示例

let dataSource = [{ id: '1', name: 'test-content' }, { id: '2', name: 'test-content' }],
    table,
    wrapper;

    beforeEach(() => {
        table = <Table dataSource={dataSource}>
            <Table.Column dataIndex='id' />
            <Table.Column dataIndex='name' />
        </Table>
        wrapper = mount(table);
    })

    afterEach(() => {
        table = null;
    })

    it('should render checkboxMode', (done) => {
        wrapper.setProps({
             rowSelection: {
                getProps: (record) => {
                    if (record.id === '1') {
                        return {
                            disabled: true
                        }
                    }
                }
            }
        });

        setTimeout(() => {
            expect(wrapper.find('.checkbox').length).to.be.equal(3);
            expect(wrapper.find('.checkbox.disabled').length).to.be.equal(1);
            done();
        }, 10);
    });