小编pet*_*ess的帖子

如何使用 react-testing-library 测试由其他组件组成的组件?

我对反应测试库完全陌生。在使用 Enzyme 测试组件没有成功之后,我才开始阅读我能找到的所有各种“入门”文档和博客文章。我能找到的大多数示例都非常简单,例如“Introducing the react-testing-library”博客文章中的示例。我想看看如何测试一个本身由其他组件组成的组件的示例,因为组件组合是关于 React 的最伟大的事情之一(在这篇 SO 文章中,ComposedComponent由于缺乏更好的名称,我将称之为此类示例) .

当我为ComposedComponentedEnzyme中的 a 编写测试时,我可以断言正确的 props 被传递给了一些ChildComponent并且信任ChildComponent有自己的测试,我不必关心ChildComponent在我的测试中实际呈现给 DOM 的内容ComposedComponent。但是对于 react-testing-library,我担心由于“您的测试将使用实际的 DOM 节点而不是处理呈现的 React 组件的实例”,因此我还必须ChildComponent通过对 DOM 节点进行断言来测试 的行为它呈现以响应其与 的关系ComposedComponent。这意味着我在 React 应用程序的组件层次结构中越往上走,我的测试就会变得越长、越详尽。我的问题的要点是:如何在不测试这些子组件的行为的情况下测试具有其他组件作为子组件的组件的行为?

我真的希望我只是缺乏想象力,有人可以帮助我弄清楚如何正确使用这个已经获得了如此多的追随者作为 Enzyme 的替代品的库。

reactjs react-testing-library

15
推荐指数
1
解决办法
5246
查看次数

如何使用Formik和Redux-Saga处理表单状态

我最近在一个React项目中开始使用Redux-Saga,因为它对我来说是新的,我想学习它的工作原理。我也开始使用Formik,因为它似乎已经使Redux-Form在React应用程序中的表单管理方面黯然失色。现在,我明白了丹·阿布拉莫夫(Dan Abramov)的理由,即“将React用于短暂状态,这种状态对应用程序而言并不重要,并且不会以复杂的方式进行更改”。

但这似乎与SOMETHING_REQUESTED -> apiCall -> SOMETHING_SUCCESS or SOMETHING_FAILURERedux-Saga文档中的布局模式不符。例如,如果我有一个表单,该表单在一个由saga“执行”以执行异步请求的onSubmit上调度一些动作,则我看不到一种方法,可以在不将其存储在Redux状态的某个地方的情况下,让我的表单了解该请求的状态(我们要避免的确切反模式)。我可以想象的一种替代方法是在表单提交处理程序中执行请求,而不是将其委托给一个传奇,但这令我感到奇怪,Redux-Saga的意义何在?

请帮助填补我的理解空白。

编辑:仅供参考,redux-saga回购上的这个GitHub问题似乎与我的问题最相关,尽管那里写了很多文章,但似乎并没有达成共识的最佳实践。

这个reddit线程也处理该主题,但是与线程的OP类似,我想知道为什么他在Redux Promise Listener中找到的解决方案没有被更广泛地采用?

reactjs redux redux-saga formik

7
推荐指数
1
解决办法
1000
查看次数

有没有办法对 Storybook 中的故事进行设置和清理?

有没有办法在 Storybook 中执行故事的设置和清理步骤?举例来说,我有一个组件,它的行为取决于某些本地存储的存在或值,或者window. 我希望能够设置一个故事,以便进行清理,这样它就不会无意中延续到其他故事。

如果没有官方建议的最佳实践,我认为最好的方法是制作一个自定义装饰器,将故事包装在具有设置和拆卸生命周期事件的组件中(在本例中,我使用 Storybook 和 React,仅供参考) 。接受其他想法。

reactjs storybook

6
推荐指数
1
解决办法
547
查看次数