React/Enzyme：模拟/存根嵌套组件答案

【问题标题】：React/Enzyme: Mocking/stubbing nested componentsReact/Enzyme：模拟/存根嵌套组件
【发布时间】：2017-10-25 22:52:22
【问题描述】：

我正在使用 mocha/chai/enzyme/sinon 来测试我的 React 组件。假设我正在寻找测试以下组件，并且我需要 mount 它以测试生命周期方法。

<Container>
  <div />
  <NestedContainer />
  <div />
</Container>

进一步假设我确实不想在任何情况下安装组件NestedContainer。相反，我想做的是在安装 Container 之前用普通的旧 div 模拟/存根 NestedContainer。

我已经在网上寻找解决方案来执行此操作，我找到的唯一相关资源是：https://medium.com/@AndreCalvo/react-component-testing-mocking-method-calls-components-and-time-d780d45e4cd5。引入一个大型库来模拟这些组件似乎有点繁重。

有没有人知道其他方法可以做到这一点？谢谢。

【问题讨论】：

【解决方案1】：

您无需挂载即可测试生命周期方法。

您可以使用instance()。

const wrapper = shallow(<MyComponent {...props} />);

wrapper.instance().componentDidMount();

这将触发指定的生命周期方法。

这对于测试调用 redux 操作（可以模拟）等非常有用。

【讨论】：

哦，我不知道。不管怎样，我仍然需要挂载组件，因为我需要测试生命周期方法之外的东西。
像什么？根据我的经验，您无需安装即可测试大多数东西。
我正在使用 axe-core 来测试呈现的 HTML 的可访问性。
嗯，很公平。您的应用程序是否特别关注可访问性？否则，您可以依靠 linting 工具来确保您拥有所需的东西。即 a11y 有一个 eslint 插件
哈哈，我也在使用 a11y typescript linting 规则。然而，在某些情况下 a11y 并不能捕获所有内容，这就是为什么我们要测试呈现的 HTML 的可访问性。