使用 react-spring/react-motion 进行快照测试

Question

我正在尝试使用 Jest 和 Enzyme 对我的 React 组件进行快照测试。一些组件中有动画组件（从 react-spring/react-motion 导入），它渲染一个函数作为它的子组件。这使得测试非常困难。我做了很多研究并提出了 3 个想法：

使用 Enzyme 的 mount 渲染所有内容，并对其进行快照测试。我发现它 impossible/ineffective 用于昂贵的组件，并且生成的快照通常非常重 (1MB - 2MB)。
使用 Enzyme 的 shallow 和快照测试组件。然后找到动画组件，使用 Enzyme 的 renderProp() 渲染其中的子项并对其进行快照测试。在我发现 renderProp() 对于 react-motion 和 react-spring 不能很好地与 <StaggeredMotion /> 一起工作之前，这一直很有效。此问题的解决方法是显式调用函数 .prop('children')()，然后浅化整个事情，但代码看起来会很乱且难以阅读。
只需使用 Enzyme 的 shallow 和快照测试组件。其余的在图书馆那边。

问题是：我应该使用哪一个？如果 none 这些都足够好，还有哪些替代方案？提前致谢。

（如果您需要代码示例，我很乐意提供）

Answer 1

我通过为 Jest 模拟 react-spring 来解决使用 react-spring 的测试组件的问题。

为此，请将其添加到您的 Jest 配置中：

[...]
"moduleNameMapper": {
    "^react-spring(.*)$": "<rootDir>/jest/react-spring-mock.js"
},

文件 /jest/react-spring-mock.js 可能如下所示：

const React = require('react');

function renderPropsComponent(children) {
    return React.createElement('div', null, children()({}));
}

export function Spring(props) {
    return renderPropsComponent(props.children);
};

export function Trail(props) {
    return renderPropsComponent(props.children);
};

export function Transition(props) {
    return renderPropsComponent(props.children);
};

export function Keyframes(props) {
    return renderPropsComponent(props.children);
};

export function Parallax(props) {
    return renderPropsComponent(props.children);
};

export const animated = {
    div: (props) => {
        return React.createElement('div', null, props.children)
    },
};

注意：这些模拟主要针对 react-spring 的 render-props API。此外，此技术将导致忽略测试中通常由 react-spring 生成的所有内容。（它将创建一个容器 <div>。）

使用 react-spring/react-motion 进行快照测试

Snapshot testing with react-spring/react-motion

testing

reactjs

enzyme

react-motion

react-spring