unit-testing - 如何对调用子级方法的父级 react 组件进行单元测试

Question

在 React 文档的“提示”下，他们描述了一种组件之间通信的模式，其中父组件调用子组件的方法(通过引用)。

参见https://facebook.github.io/react/tips/expose-component-functions.html

我正在使用第三方 react 组件，需要我使用这种方法。

我想对我的组件进行单元测试，并检查它是否在正确的情况下调用子级的方法(使用正确的参数)，但我无法弄清楚如何...

对于 Facebook 文档中的示例，我将如何编写一个测试来检查 Todos 在应该时对最后一个 Todo 调用动画？

Answer 1

考虑使用 Facebook 的 Flux pattern 。通过使用此模式，您可以将 UI 组件与状态管理分开； “商店”促进了状态管理。商店最终协调组件之间的状态。现在你们的观点不能直接交流。此外，数据仅以一种方式流动。

请注意，您可以使用许多 Flux 实现，such as reFlux 。您可以通过搜索可用的 NPM 包找到其中的许多内容

...那么，如何测试这个？

一旦您确定了一种模式，您就可以通过 Google 搜索大量资源、博客和示例来进行测试。目前，单元测试主要有两种方法:Jest 和 Jasmine。 Facebook recommends using Jest :

For a unit test to operate on a truly isolated unit of the application, we need to mock every module except the one we are testing. Jest makes the mocking of other parts of a Flux application trivial.

...

Flux stores often receive a great deal of formal unit test coverage, as this is where the application state and logic lives. Stores are arguably the most important place in a Flux application to provide coverage