javascript - 浅渲染不渲染包装在消费者中的组件( Jest/ enzyme )

Question

我有这样一个组件:

import React from 'react';
import classNames from 'classnames/bind';

import { connect } from 'react-redux';

import Topic from './components/Topics';
import AutoItem from './AutoItem';
import DataContext from "./dataContext";

const cx = classNames.bind(Styles);

export class TestComponent extends React.Component {


  render() {


    return (
      <div>
              <DataContext.Consumer>
                {value => (
                  <AutoItem
                    data={value}
                  />
                )}
              </DataContext.Consumer>


            <DataContext.Consumer>
              {value => (
                <Topic data={value} />
              )}
            </DataContext.Consumer>

      </div>
    );
  }
}

const mapStateToProps = state => ({
  ...
});

const mapDispatchToProps = dispatch => ({
  ...
});

export default connect(mapStateToProps, mapDispatchToProps)(TestComponent);

我想用 jest/enzyme 测试它。我编写了这样的测试以检查在 TestComponent 中呈现的 Topic 和 AutoItem 组件:

describe('<TestComponent  /> Component render', () => {

  let wrapper;

  beforeEach(() => {
    wrapper = shallow(<TestComponent {...props} />);
  });

  describe('<TestComponent  /> rendering', () => {

    test('should render child components in <TestComponent  /> component', () => {
      console.log(wrapper.debug())
      expect(wrapper.find(AutoItem).length).toEqual(1);
      expect(wrapper.find(Topic).length).toEqual(1);
    });

  });
});

但测试失败，这是我在控制台中的内容:

expect(received).toEqual(expected) // deep equality

    Expected: 1
    Received: 0

这是 console.log(wrapper.debug()) 的输出:

<div className="">

            <ContextConsumer>
              [function]
            </ContextConsumer>
          </div>

          <ContextConsumer>
            [function]
          </ContextConsumer>


    </div>

我不明白为什么包装在 Consumer 中的组件不呈现并在控制台输出中显示为 [function]。有人可以帮我解决这个问题吗？

"jest": "^24.8.0",
"babel-core": "^7.0.0-bridge.0",
"babel-jest": "^23.4.2",

根据我写的答案:

import DataContext from './dataContext';


test('should render child components in <TestComponent  /> component', () => {
      const wrapper = shallow(<TestComponent {...props} />)
        .find(DataConsumer.Consumer)
        .renderProp('children')();

          expect(wrapper.find(AutoItem).length).toEqual(1);
          expect(wrapper.find(Topic).length).toEqual(1);
    });

这就是我在 cosnole 中的内容:

Expected: 1
Received: 0

这是我在调试包装器时在控制台中得到的:

Answer 1

在 Enzyme 中你应该显式渲染 renderProp: enzyme