Question

我正在尝试用Jest和Enzyme快照测试我的React组件。某些组件中包含动画组件（从react-spring/react-motion导入），该组件将功能作为其子代呈现。这使得测试变得异常困难。我做了很多研究，提出了3个想法：

使用酶的mount渲染所有内容，并对其进行快照测试。我发现昂贵的组件是不可能/无效的，而且生成的快照通常非常繁重（1MB-2MB）。
使用酶的shallow并对组件进行快照测试。然后找到动画组件，使用Enzyme的renderProp()渲染其中的子代，并对它们进行快照测试。在我发现renderProp()和<StaggeredMotion />的{{1}}与react-motion不能很好地工作之前，这非常有效。解决此问题的一种方法是将函数显式调用为react-spring，然后使整个过程变浅，但是代码随后将显得凌乱且难以阅读。
只需使用酶的.prop('children')()并对组件进行快照即可。其余的在图书馆一边。

问题是：我应该使用哪个？如果这些都不足够好，有什么替代方法？预先感谢。

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

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。同样，该技术将导致忽略测试中通常由反应弹簧生成的所有内容。（它将创建一个容器<div>。）

带有反应弹簧/反应运动的快照测试

1 个答案: