酶:浅渲染内反应还原组分

Question

我有一个简单的react组件，使用Card from and:

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Card } from 'antd';
export class TBD extends Component {
  constructor() {
    super();
  }
  render() {
    return (
      <Card title={this.props.pathname}>
        TODO
      </Card>
    );
  }
}
export let select = (state) => {
  return state.route;
};
export default connect(select)(TBD);

现在我写了一些简单的测试，并想检查我的TBD组件使用Card

import React from 'react';
import {mount, shallow}  from 'enzyme';
import {Provider, connect}  from 'react-redux';
import {createMockStore}  from 'redux-test-utils';
import {expect} from 'chai';
import chai from 'chai';
import chaiEnzyme from 'chai-enzyme';
chai.use(chaiEnzyme());
import { Card } from 'antd';
import TBDConnected,  {TBD, select} from '../src/js/components/TBD';
describe('Fully Connected:', function () {
    it('show selected item text', function () {
      const expectedState = {route: {pathname: 'Menu1'}};
      const store = createMockStore(expectedState);
      const ConnectedComponent = connect(select)(TBDConnected);
      const component = shallow(<ConnectedComponent store={store} />).shallow().shallow();
      console.log(component.debug());
      expect(component.equals(<Card/>)).is.equal(true);
    });
  });

它失败了，因为3个浅层返回我

<Component title="Menu1">
TODO
</Component>

但我期待

<Card title="Menu1">
TODO
</Card>

经过一次渲染后，我从渲染卡得到纯html，我不明白为什么它渲染到组件而不是卡，以及我如何才能得到我想要的结果。

<标题> 更新

的例子，简化我的问题。下一个测试失败:

describe('TBD', function () {
  it('Renders a Card', function () {
    const component = shallow(<TBD />);
    console.log(component.debug());
    expect(component.equals(<Card/>)).is.equal(true);
  });
});

控制台的调试输出:

<Component title={[undefined]}>
TODO
</Component>

但我期望:

<Card title={[undefined]}>
TODO
</Card>

Answer 1

您不需要测试整个连接的组件。我将首先测试表示纯组件(作为单元测试)，然后您可以单独测试连接器。

即

import React from 'react';
import {shallow}  from 'enzyme';
import {expect} from 'chai';
import chai from 'chai';
import chaiEnzyme from 'chai-enzyme';
chai.use(chaiEnzyme());
import { Card } from 'antd';
import {TBD} from '../src/js/components/TBD';
describe('TBD', function () {
  it('Renders a Card', function () {
    const component = shallow(<TBD />);
    expect(component.equals(<Card/>)).is.equal(true);
  });
  it('sets the right title', function () {
    const component = shallow(<TBD pathname="example" />);
    expect(component.prop('title')).is.equal("example");
  });
});

如您所见，您的纯组件必须作为纯函数进行测试。你传递一些道具，并期望一些渲染。

当你测试你的连接器时，你可以断言它正确地映射了stattoprops和dispatchToProps…

Answer 2

Ant开发组件中的问题。这个组件的一部分写成简单的匿名函数，没有扩展React。组件等。结果，在酶渲染像<Component />，在浏览器中看起来像<StatelessComponent />。