Question

嗨，我很反应。我已经使用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插件并为你的组件编写测试？如果是这样，请帮助我如何写它们？

Answer 1

任何组件的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>,
  )
));

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

1 个答案: