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

由于你做浅渲染，SpecialAlertPanel会渲染到AlertPanel而不是“更深”（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 2

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

如果它是复合组件，那么它将是组件构造函数。

所以SpecialAlertPanel的包装类型为AlertPanel。

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

中

Answer 3

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

使用您显示的示例，您有一个AlertPanel组件并且已经过测试。

SpecialAlertPanel唯一的功能是呈现AlertPanel。

对SpecialAlertPanel进行<div>测试是重复AlertPanel的测试。

如果SpecialAlertPanel正在呈现AlertPanel，那么您真正需要进行测试的全部内容。如果AlertPanel通过了测试，并且SpecialAlertPanel通过了测试以检查AlertPanel，那么您已经知道它正在呈现<div>，而无需明确地测试它。

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

用酶测试组成的Reactjs组件

3 个答案: