javascript - 使用 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

由于您进行浅层渲染，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');
});