Reactjs 使用反作用力弹簧/反作用力运动进行快照测试

我试着用Jest和酶快照测试我的反应成分。某些组件中包含动画组件（从

react spring/react motion

导入），该组件将函数渲染为其子级。这使得测试变得异常困难。我做了很多研究，提出了3个想法：

• 使用Ezyme的

  mount

  渲染所有内容，并对其进行快照测试。我发现对于昂贵的组件来说这是不可能的/无效的，而且生成的快照通常非常重（1MB-2MB）
• 使用酶的

  shallow

  和快照测试成分。然后找到动画组件，使用Ezyme的

  renderProp（）

  渲染其中的子对象，并对它们进行快照测试。这非常有效，直到我发现

  renderProp（）

  与
  的

  反应动作和
  反应弹簧
  不配合。解决这个问题的一个方法是显式地将函数调用为
  .prop（'children'）（）
  ，然后将整个过程变浅，但是代码看起来会很混乱，很难阅读

• 只需使用酶的

  shall

  和快照测试组件。其余的在图书馆这边

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

---

（如果您需要一个代码示例，我非常乐意提供）

我通过模仿react-spring来解决使用react-spring的组件的测试问题

为此，请将以下内容添加到Jest配置中：

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

注意：这些模拟主要关注react spring的render props API。

---

此外，这种技术将导致忽略测试中通常由react-spring生成的所有内容。（它将创建一个容器。）

您解决了这个问题吗？@TimMG我决定将react spring内的零件提取到另一个组件上并进行测试。然而，我不认为我们需要这样做的介绍hooksI按照你的指示，并作出了一个新的组件的动画部分，但我的测试仍然失败。这可能是因为新组件是在我要测试的组件中导入的。@TimMG如果你提出一个新问题，我会非常乐意回答它。看一看听起来是个不错的方法。你试过新的钩子api吗？我还没有，但我会的。我想他们也可以被类似的方式嘲笑。类似于

export const useSpring=（）=>[{}，（）=>{}]
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)
    },
};