如何模拟 React Context 以用玩笑测试组件

Question

我想测试组件是否在渲染函数中渲染。组件封装在 Consumer 内部：

const TestComponent = () => (
  <div>
<ItemsContext.Consumer>
            {(value) => (
              <Autos
                autoEnabled={value.autoEnabled}
              />
            )}
          </ItemsContext.Consumer>
  </div>
);

我在上层组件中设置了上下文：

const AutosWrapper = () => (

      <ItemsContext.Provider value={{ autoEnabled: false, sourcesEnabled: true }}>
        <TestComponent/>
      </ItemsContext.Provider>

)

我的测试如下：

import ItemsContext from '../ItemsContext';

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

  let wrapper;

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

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


    test('should render child components in <TestComponent /> component', () => {
      const autoContextWrapper = wrapper.find(ItemsContext.Consumer).at(0)
        .renderProp('children')();

      expect(autoContextWrapper.find(Autos).length).toEqual(1);
    });

  });
});

但是当我运行这个测试时，我有以下错误 - TypeError: Cannot read property 'autoEnabled' of undefined 我无法理解如何将默认值传递给上下文或模拟它们。我尝试了这样的变体但没有成功：

ItemsContext.Consumer = jest.fn((props) => props.children({ autoEnabled: false }));

Answer 1

您必须使用提供者包装您的组件，以便消费者可以访问上下文。这特别有用，因为这使您能够更改上下文并根据给定的上下文值进行断言。

例子：

import ItemsContext from '../ItemsContext';

describe('<TestComponent /> Component render', () => {
  describe('<TestComponent /> rendering', () => {
    test('should render child components in <SearchResult /> component', () => {
      const wrapper = shallow((
        <ItemsContext.Provider value={{ autoEnabled: true, sourcesEnabled: true }}>
          <TestComponent />
        </ItemsContext.Provider>
      ));

      const autoContextWrapper = wrapper
        .find(ItemsContext.Consumer)
        .at(0)
        .renderProp('children')();

      expect(autoContextWrapper.find(Topics).length).toEqual(1);
    });
  });
});