测试反应热键中包含的反应组件

时间:2017-12-19 11:39:28

标签: reactjs hotkeys jest

嗨,我很反应。我已经使用react-hotkeys在我的反应应用程序中实现了键盘快捷键。

该插件基本上要求将呈现的代码包装在以下标记内

<Hotkeys>
// Component render output
</Hotkeys>

现在如何测试这种组件?我写了一个像这样的测试用例

it('Shows text passed', () => {
 var expected = [1,2,3,0];
 const wrapper = renderer.create(<HomePageRow title={'Home Row Title'}cards={[]}/>);
 const inst = wrapper.getInstance();
 expect(inst.render()).toMatchSnapshot();
});

它出现以下错误

Console

console.error node_modules\react-test-renderer\cjs\react-test-renderer.development.js:5530
  The above error occurred in the <HotKeys> component:
      in HotKeys (at homePageRow.js:68)
      in HomePageRow (at home.test.js:14)

  Consider adding an error boundary to your tree to customize error handling behavior.

这个错误边界是什么?如何在测试中忽略HOC?有没有人实现react-hotkeys插件并为你的组件编写测试?如果是这样,请帮助我如何写它们?

1 个答案:

答案 0 :(得分:0)

任何组件的WrappedComponent属性都可以帮助您访问包含HOC的组件,而无需为HOC创建模拟:

it('Shows text passed', () => {
 var expected = [1,2,3,0];
 const wrapper = renderer.create(<HomePageRow.WrappedComponent title={'Home Row Title'}cards={[]}/>);
 const inst = wrapper.getInstance();
 expect(inst.render()).toMatchSnapshot();
});

如果不是HOC只是试图模仿Hotkeys

jest.mock('../../../Hotkeys', () => (
  jest.fn(() =>
    <div>Hotkeys component</div>,
  )
));