使用 Enzyme 测试组合的 Reactjs 组件

Question

我遵循了 React 文档的建议，通过组合创建了一个专门的组件：

export default class AlertPanel extends React.Component {

    constructor(props) {
        super(props);
    }

    render() {
                textRows = <div>{this.props.text}</div>;
            }

            return (
               <Alert bsStyle={this.props.style} onDismiss={this.props.onDismiss}>
                    {textRows} 
               </Alert>
            );
    }

...和...

import React from 'react';
import AlertPanel from './AlertPanel';

export default class SpecialAlertPanel extends React.Component {

    constructor(props) {
        super(props);
    }

    render() {
        return (
          <AlertPanel text="special" />
        ) ;
    }
}

AlertPanel 通过了测试：

it( 'should render AlertPanel to a div', function() { 
    const wrapper = shallow( <AlertPanel /> );
    expect( wrapper.type() ).to.eql( 'div' );
});

我认为等效测试适用于 SpecialAlertPanel:

it( 'should render SpecialAlertPanel to a div', function() {
    const wrapper = shallow( <SpecialAlertPanel /> );
    expect( wrapper.type() ).to.eql( 'div' );
});

但是这个测试失败了：

expected [Function: AlertPanel] to deeply equal 'div'

我的测试或代码有问题吗？

Answer 1

来自https://github.com/airbnb/enzyme/blob/master/docs/api/ShallowWrapper/type.md：

If it's a composite component, this will be the component constructor.

所以SpecialAlertPanel的包装器类型是AlertPanel。

如果您希望测试通过，请将 AlertPanel 包裹在 div 中。

Answer 2

由于您进行了浅层渲染，SpecialAlertPanel 被渲染为 AlertPanel 而不是 "deeper" (http://airbnb.io/enzyme/docs/api/ShallowWrapper/shallow.html)

您很可能需要

it( 'should render SpecialAlertPanel to a div', function() {
  const wrapper = shallow( <SpecialAlertPanel /> );
  expect(wrapper.find(AlertPanel).shallow().type()).to.eql('div');
});

Answer 3

与@Igor 和@RemLampa 的正确答案略有不同。另一种观点是 - 你应该测试什么 SpecialAlertPanel？

根据您展示的示例，您有一个 AlertPanel 组件并且已经过测试。

SpecialAlertPanel的唯一功能就是渲染AlertPanel。

为 <div> 测试 SpecialAlertPanel 是在重复 AlertPanel 的测试。

您真正需要测试的是 SpecialAlertPanel 是否正在渲染 AlertPanel。如果 AlertPanel 通过了它的测试并且 SpecialAlertPanel 通过了检查 AlertPanel 的测试，那么您已经知道它正在呈现 <div>，而无需对其进行显式测试.

（当然，如果您将来添加额外的功能，您将需要向 SpecialAlertPanel 添加测试）

使用 Enzyme 测试组合的 Reactjs 组件

Testing a composed Reactjs component with Enzyme

javascript

reactjs

enzyme