ReactJs 开玩笑测试在供应商模块上失败

Question

我正在尝试在我的项目中使用 Jest，如下所示来测试我的 App 类：

it('renders correctly', () => {
const tree = renderer
.create(<Router><App /></Router>)
.toJSON();
expect(tree).toMatchSnapshot();
});

但是我从供应商模块收到错误，错误是这样的：

TypeError: Cannot read property 'addEventListener' of null
at node_modules/hammerjs/hammer.js:222:16

我不知道如何解决它

Answer 1

为什么它不起作用？

renderer.create将 React 组件渲染为纯 JavaScript 对象， 而不依赖于 DOM 或本机移动环境。

参考： https://reactjs.org/docs/test-renderer.html#testrenderercreate

你看到hammerjs/hammer的实现，你会发现在渲染组件中找到目标 DOM 元素后，addEventListener正在被调用。当 DOM 环境不存在时，目标 DOM 元素会null，因此会出现错误。

如何解决？

如果您想断言并操作渲染的组件，您可以 可以使用Enzyme或React的TestUtils。

参考： https://facebook.github.io/jest/docs/en/tutorial-react.html#dom-testing

当你有与DOM交互的元素时，你可以使用Enzyme的mount进行完整的DOM渲染。 http://airbnb.io/enzyme/docs/api/mount.html

所以这应该有效：

it('renders correctly', () => {
const tree = mount(<Router><App /></Router>);
expect(tree).toMatchSnapshot();
});