如何用jest模拟React Context来测试组件？

Question

我想测试组件是否在渲染函数中渲染。组件被封装在Consumer里面。

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

我在上层组件中设置了context

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);
    });
  });
});