Question

我一直在努力优化我的反应项目，今天我使用react-lazyload（https://github.com/jasonslyvia/react-lazyload）实现了所有图片的延迟加载。

该软件包工作得很好，但是当我尝试更新快照测试时，它们都失败了！

我得到的错误是：

Uncaught [TypeError: Cannot read property 'position' of undefined]

我试着看看我能在谷歌上找到什么但没有出现。

以下是我的一个快照测试示例（它们基本上是基本测试）：

＆＃13;

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;

我是否需要模拟延迟加载包？如果有的话，是否有人对我将如何做到这一点有任何建议？非常感谢任何帮助。

Answer 1

任何人遇到这个问题，我通过使用'酶到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正在烦恼的确切原因，我的直觉告诉我，因为节点内没有窗口让我的懒加载占位符填充不存在'位置'来定义。我猜这种酶在幕后有一些聪明的东西可以解决这个问题吗？

如果有人有更明确的解释，我很乐意听到，但至少现在问题已解决：）

react-lazyload打破了jest快照？

1 个答案: