2

我正在尝试使用 Jest 和 Enzyme 对我的 React 组件进行快照测试。一些组件中包含动画组件(从 导入react-spring/react-motion),它将一个函数呈现为其子级。这使得测试变得异常困难。我做了很多研究并提出了3个想法:

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

问题是:我应该使用哪一个?如果这些都不够好,还有哪些选择?提前致谢。

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

4

1 回答 1

2

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

于 2019-06-05T11:46:05.003 回答