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 回答