我一直在努力优化我的反应项目,今天我使用react-lazyload(https://github.com/jasonslyvia/react-lazyload)实现了所有图片的延迟加载。
该软件包工作得很好,但是当我尝试更新快照测试时,它们都失败了!
我得到的错误是:
Uncaught [TypeError: Cannot read property 'position' of undefined]
我试着看看我能在谷歌上找到什么但没有出现。
以下是我的一个快照测试示例(它们基本上是基本测试):
import React from 'react';
import renderer from 'react-test-renderer';
import App from './App';
describe('App', () => {
describe('Component Snapshot', () => {
it('should render correctly', () => {
const componentSnapshot = renderer.create(<App />).toJSON();
expect(componentSnapshot).toMatchSnapshot();
});
});
});
&#13;
我是否需要模拟延迟加载包?如果有的话,是否有人对我将如何做到这一点有任何建议? 非常感谢任何帮助。
答案 0 :(得分:0)
任何人遇到这个问题,我通过使用'酶到json'而不是'react-test-renderer'和酶自己的'render'功能来解决它。
这是更新的测试,所以你可以看到我的意思。
import React from 'react';
import { render } from 'enzyme';
import toJson from 'enzyme-to-json';
import App from './App';
describe('App', () => {
describe('Component Snapshot', () => {
it('should render correctly', () => {
const componentRender = render(<App />);
expect(toJson(componentRender)).toMatchSnapshot();
});
});
});
我不知道为什么react-test-renderer正在烦恼的确切原因,我的直觉告诉我,因为节点内没有窗口让我的懒加载占位符填充不存在'位置'来定义。我猜这种酶在幕后有一些聪明的东西可以解决这个问题吗?
如果有人有更明确的解释,我很乐意听到,但至少现在问题已解决:)