react-lazyload 打破了开玩笑的快照？答案

【问题标题】：react-lazyload breaks jest snapshots?react-lazyload 打破了开玩笑的快照？
【发布时间】：2018-06-12 16:47:07
【问题描述】：

我一直在优化我的 react 项目，今天我使用 react-lazyload (https://github.com/jasonslyvia/react-lazyload) 实现了所有图像的延迟加载。

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

我得到的错误是：

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

我尝试在 google 上查看我可以找到的内容，但没有任何结果。

这是我的一个快照测试的示例（它们几乎是最基本的）：

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();
        });
    });
});

我需要模拟延迟加载包吗？如果是这样，有人对我将如何去做有任何建议吗？非常感谢任何帮助。

【问题讨论】：

标签： reactjs jestjs enzyme

【解决方案1】：

如果有人遇到这个问题，我通过使用 'enzyme-to-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 出错的确切原因，我的直觉告诉我，因为节点内没有窗口供我的延迟加载占位符填充，所以没有 '位置”来定义。我猜想酶在幕后有一些巧妙的事情可以解决这个问题？

如果有人有更明确的解释，我很想听听，但至少现在问题已经解决了 :)

【讨论】：