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


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


问题是:我应该使用哪一个?如果这些都不足够好,有什么替代方法?提前致谢。

(如果您需要一个代码示例,我很乐意提供)

最佳答案

我通过模拟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>。)

关于reactjs - 带有反应 Spring / react 运动的快照测试,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/53953693/

10-11 23:18
查看更多