【问题标题】:How can I unit test parent react components that call methods on children如何对调用子级方法的父级反应组件进行单元测试
【发布时间】:2015-11-04 01:37:02
【问题描述】:

在 react 文档中的“提示”下,它们描述了组件之间通信的模式,其中父组件调用子组件的方法(通过 ref)。

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

我正在使用要求我使用这种方法的第三方 React 组件。

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

对于 Facebook 文档中的示例,我应该如何编写一个测试来检查最后一个 Todo 上的 Todos 调用动画?

【问题讨论】:

    标签: unit-testing reactjs


    【解决方案1】:

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

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

    ...那么,如何测试呢?

    确定模式后,您可以在 Google 上搜索大量资源、博客和示例进行测试。目前,有两种主要的单元测试方法:Jest 和 Jasmine。 Facebook recommends using Jest:

    为了使单元测试在应用程序的真正隔离单元上运行,我们需要模拟除我们正在测试的模块之外的每个模块。 Jest 使 Flux 应用程序的其他部分的模拟变得微不足道。

    ...

    Flux 存储通常会收到大量正式的单元测试覆盖率,因为这是应用程序状态和逻辑所在的地方。商店可以说是 Flux 应用程序中提供覆盖的最重要的地方

    【讨论】:

      猜你喜欢
      • 2017-05-02
      • 1970-01-01
      • 2020-09-28
      • 2019-09-30
      • 2019-12-01
      • 2021-05-17
      • 1970-01-01
      • 1970-01-01
      • 2015-07-28
      相关资源
      最近更新 更多