•baseElement：如果指定了容器，则此值默认为该值，否则此值默认为document.documentElement。这将用作查询的基本元素，以及在使用debug()时打印的内容。...•getByText:搜索具有文本节点的所有元素，其中的textContent与作为参数传递的给定文本匹配。•getByTitle:返回具有与作为参数传递的给定文本匹配的title属性的元素。...它将用于从测试文件中选择这些元素。...唯一的区别是,我们使用 getByTestId 选择必要的元素(根据 data-testid )并检查是否通过了测试。...这里,像往常一样,我们使用 getByTestId 选择元素和检查第一个测试如果按钮禁用属性。对于第二个，如果按钮是否被禁用。 如果您保存文件或在终端纱线测试中再次运行，测试将通过。
在本教程中，我们将了解如何通过使用带有hooks的to-do应用程序来实现这一点。我们将介绍使用Enzyme和React Testing Library编写测试，这两个库都能做到这一点。...如果你第一次使用Enzyme，我们之前发布过关于它的文章，《Enzyme如何在React应用中与Jest一起使用》。我们可以用他们来深入测试React Hooks。...使用react-testing-library测试 我们将为此写三个测试： 1、初始待办事项的渲染 2、我们可以加一个新的待办事项 3、我们可以删除一个待办事项 首先，我们安装需要的安装包： npm install...我们使用getTestId来返回元素的与data-testid匹配的节点。在这个例子里是元素。然后，我们检查它总共有两个子元素(每个子元素是无序列表中的元素)。...这些测试也可以在GitHub上找到。 语法检查 当使用hooks时，有两个语法检查规则要遵守： 规则1:在顶层调用钩子 ...循环或嵌套函数，而不是内部条件。 // Don't do this!
注意：何时使用标签定位器：官网建议在查找表单字段时，请使用此定位器。5.3按占位符定位输入可能具有占位符属性，以提示用户应输入什么值。...注意：何时使用占位符定位器：官网建议在查找没有标签但具有占位符文本的表单元素时，请使用此定位器。5.4按文本定位通过它包含的文本找到一个元素。...您还可以按文本进行筛选，这在尝试查找列表中的特定项目时非常有用。5.5通过替代文本定位所有图像都应具有描述图像的属性alt。您可以使用 Page.getByAltText() 根据替代文本定位图像。...注意，何时使用 TESTID 定位器：官网建议当您选择使用测试 ID 方法时，或者当您无法按角色或文本进行定位时，也可以使用测试 ID。...Page.locator()创建一个定位器，该定位器采用描述如何在页面中查找元素的选择器。
2.1按文本过滤定位器可以使用 locator.filter（）方法按文本进行过滤。它将搜索元素内某处的特定字符串，可能在后代元素中，不区分大小写。您还可以传递正则表达式。...filter(new Locator.FilterOptions().setHasNotText("Out of stock"))) .hasCount(5);2.3子项/后代过滤定位器支持一个选项，即仅选择具有或没有与另一个定位器匹配的后代的元素的元素...（） 或 Locator.nth（） 从列表中选择特定元素。...4.4链接过滤器当您有各种相似性的元素时，可以使用 locator.filter（）方法选择正确的元素。您还可以链接多个筛选器以缩小选择范围。...在多个元素匹配时使用哪个元素来明确选择退出严格性检查。
因为我们的测试用例规避了关于实现的细节，所以 hooks 也没问题！...所以在之前，是我们在渲染之后同步的设置 localStorage 的值；而现在这个动作被安排到渲染之后的某个时候。为何如此呢？...这使得你的应用使用起来更具响应性。多数副作用不需要同步发生。...使用 react-testing-library 库的 wait 工具并把测试设置为 async。...render props 组件又如何？
测试不仅仅是为了提高覆盖率，其主要目的是尽可能地模拟实际使用场景。最近，我需要为一个庞大的ReactJS项目建立测试架构。让我展示给你我是如何做的。虽然它还不完整，但我想与你分享我的进展。...该项目已经在使用Enzyme进行测试。虽然Enzyme是一个不错的库，但是react-testing-library是测试React组件的更好选择。React团队也推荐使用它。...这些是你想要使用redux存储来测试组件的值。...现在，不再使用react-testing-library提供的默认渲染方法，你可以使用renderConnected函数测试你的组件，并传递你想要的存储部分。... 现在，如果要测试组件功能，该功能使用提供者传递的值
每当开发一个新的程序时，你需要为其做好在以后转换为 React 应用的新设计，首先试着确定设计草图中的组件，如何分离它们以使其更易于管理，以及哪些元素是重复的（或他们的行为）。...尽量避免添加可能“将来有用”的代码 —— 虽然这很诱人，但可能未来永远也不会到来，你将留下一堆具有大量可配置选项的多余通用功能/组件。 ?...顾名思义，受控组件的值由 React 控制，能为与用户交互的元素提供值，而不受控制的元素不获取值属性。...请注意，Webpack 和 CRA 不是唯一的选项，因为你可以使用其他构建工具，如 Brunch。这通常包含在官方文档中，无论是官方的 React 文档还是特定工具的文档。...上述步骤会使你的应用在没有来自 React 的检查和警告的情况下运行，并且 bundle 本身也将被最小化。 你还可以为 React 应用做更多的事。你如何处理构建的 JS 文件？
但是，并不是每个人都在使用相同的工具或都知道所有有用的工具，这些工具有助于使 React 开发体验更有趣，更主动。...如果大家还没使用 React ，或者你有对它感兴趣的朋友，当他们问你为什么选择这个库的时候，你该怎么回答呢？...以下是 Guppy 使用时的样子： 7. react-testing-library 我一直很喜欢 react-testing-library，因为在编写单元测试时感觉不错。...当然，我们能够更清楚的了解如何获取组件所需的数据，使用哪种排序方法等。但是，如果我们必须更改实现方式以指向另一个数据库的话，单元测试就会失败，因为这些是耦合逻辑的实现细节。...CodeSandbox 这是本次推荐中最好的可用工具之一，它可以让我们手动使用 React 的速度比眨眼还快（好吧，也许也没那么快）。
随时代发展，我们也对这个库的 API 做了很多修改，同时也发现社区中有很多不怎么优雅的使用方式。...接下来，我就一一盘点这些方法，解释为什么它们不是很好，以及如何改进测试以避免这些陷阱。 注：下面是重要程度的说明。...而且 render 的返回值里也并没有 Wraper 任何东西，它只是一些工具 API 的集合而已。所以，一般情况下可以不需要它了。...建议：直接使用从 render 返回值解构出来的东西，或者将返回值命名为 view。...也因为这点，断言是永远不可能失败的（因为如果找不到元素，查询在断言之前抛出异常）。 因为这个原因，很多人直接不做断言了。
Glance”对内置的 hooks 进行了快速的介绍： https://reactjs.org/docs/hooks-overview.html “Building Your Own hooks ”演示了如何使用自定义...测试库也可以用它来包装它们的 API（例如，react-testing-library 的 render 和 fireEvent 就是这样做的）。...为了减少样板代码，我们建议使用 react-testing-library（https://git.io/react-testing-library），你可以像最终用户使用组件那样对组件进行测试。...React DOM 在使用 useState 和 useReducer hooks 时，如果值相同则退出渲染。...使用 Object.is 算法比较 useState 和 useReducer 的值。 支持传给 React.lazy() 的同步 thenable。
但是，并不是每个人都在使用相同的工具或都知道所有有用的工具，这些工具有助于使 React 开发体验更有趣，更主动。...当我们完成用户界面映射后，可以选择导出到现有项目或新项目中。如果您选择导出到现有项目并选择根目录，则将其导出到 ./src/components，如下所示： ?...当然，我们能够更清楚的了解如何获取组件所需的数据，使用哪种排序方法等。但是，如果我们必须更改实现方式以指向另一个数据库的话，单元测试就会失败，因为这些是耦合逻辑的实现细节。...有很多不同的 React 组件，可供任何人使用，包括选项卡、按钮、图表、表格、导航条、下拉菜单、加载旋转器、日期选择器、面包屑导航（breadcrumbs）、图标、布局等等。 10....CodeSandbox 这是本次推荐中最好的可用工具之一，它可以让我们手动使用 React 的速度比眨眼还快（好吧，也许也没那么快）。
然而，生成分析图空间有限，你还可以传递一些有用的选项来更详细地查看它，比如generateStatsFile: true，还可以选择生成一个静态HTML文件，可以将其保存在开发环境之外的某个地方，以供以后使用...完成用户界面后，可以选择导出到现有项目或新项目。 如果你选择导出到现有项目并选择根目录，它会将它们导出到....还有什么比 npx create-react-app 更简单的呢 咱们还有些人可能不知道的是如何使用CRA创建TypeScript项目，这个也很简单，只需要在末尾添加--typescript...Guppy 启动后的的样子 7. react-testing-library react-testing-library 是一个很棒的测试库，编写单元测试时，它会让你感觉很好。...列表中有很多很多React组件可供咱们使用，包括选项卡，按钮，图表，表格，导航栏，下拉列表，加载微调器，日期选择器，面包屑，图标，布局等。 10.
此外，我们重新绘制了 200 多个自定义图标，使其具有更清晰的视觉效果和更快的加载速度。另外还有自动夜间模式！...此外，它对在 JSX 元素内嵌套 markdown 提供了更好的支持。 为了适应一些重大变化，Storybook 将在 7.x 时间范围内继续支持 MDX1 的选择性支持，以确保我们的用户平稳过渡。...此外，我们还提供了一个useOf 钩子，用于创建自定义文档 Blocks，让你根据特定要求自定义文档页面。 在官方文档里可以了解更多有关这些变化的信息。...或者，你可以使用参数在 story 级别覆盖主题值。...许多改进（例如更好的错误处理和文档编制）也将为现有用户带来更好的体验。 测试 Storybook 的play函数和测试功能对于 UI 开发来说具有颠覆性的意义。
getByText, getByRole, getByPlaceholderText等辅助函数可以帮助找到元素。...以下是一些测试组件交互性的最佳实践：测试用户交互使用fireEvent模拟用户行为，例如点击、输入和选择：const input = screen.getByLabelText('Search');fireEvent.change...(input, { target: { value: 'search term' } });expect(input).toHaveValue('search term');确保组件响应变化测试组件如何响应状态或...toggleButton = screen.getByRole('button', { name: 'Toggle' });fireEvent.click(toggleButton);expect(screen.getByTestId...选择性运行测试使用--findRelatedTests选项只运行与更改相关的测试，以加快测试速度：npx jest --findRelatedTests使用快照测试对于不经常更改的组件，使用快照测试可以节省时间
然而，生成分析图空间有限，你还可以传递一些有用的选项来更详细地查看它，比如generateStatsFile: true，还可以选择生成一个静态HTML文件，可以将其保存在开发环境之外的某个地方，以供以后使用...完成用户界面后，可以选择导出到现有项目或新项目。 如果你选择导出到现有项目并选择根目录，它会将它们导出到./src/components，如下所示： ?...还有什么比 npx create-react-app 更简单的呢 咱们还有些人可能不知道的是如何使用CRA创建TypeScript项目，这个也很简单，只需要在末尾添加--typescript...7. react-testing-library react-testing-library 是一个很棒的测试库，编写单元测试时，它会让你感觉很好。...列表中有很多很多React组件可供咱们使用，包括选项卡，按钮，图表，表格，导航栏，下拉列表，加载微调器，日期选择器，面包屑，图标，布局等。 10.
react-select image.png 一个灵活且美观的 ReactJS 选择输入控件，具有多选、自动完成、异步和可创建的支持。...react-icons image.png 使用react-icons可以轻松地在React项目中使用流行的图标，它利用ES6导入，支持按需打包。...用户可以在窗口中的任何位置拖放甚至选择文件。 react-dnd image.png React DnD 是一组 React 实用程序，可帮助您构建复杂的拖放界面，同时保持组件解耦。...react-testing-library image.png 简单而完整的测试实用程序，鼓励良好的测试实践 react-image-file-resizer image.png react-image-file-resizer...react-virtual image.png 仅在 TS/JS、React、Vue、Solid 和 Svelte 中以 60FPS 的速度虚拟化大量可滚动元素中的可见 DOM 节点，同时保留对标记和样式的
一时不知道该如何下手，也不知道如何编写有效的单测，人有点懵，于是就比较粗略地研究了一下前端组件单测。...3.2 screen 在上面的例子中，其实我们也使用到了库中的 screen。...如果找到了多个元素就会 throw error，这时就需要使用 getAllBy...。...：img 的 alt 属性 ByTitle：title 属性或元素 ByRole：ARIA role，可以定位到辅助树中的元素 Id getByTestId：函数需要在源代码中添加 data-testid...如果你想要验证一个元素不在页面中，使用 queryBy，否则默认使用 getBy。 RTL 所有定位方法可 点击 查看。
最好的样式是您不编写的样式 - 尽可能使用现有组件。 新代码应该使用 css-in-js 库 e m o t i o n - 它允许您将样式绑定到元素而无需全局选择器的间接性。...在需要少量状态或访问 react 原语（如引用和上下文）的展示组件中，它们通常是一个不错的选择。例如，具有滑出(slide-out)或可展开状态(expandable state)的组件。...name 通常是表单元素的 label 或 button 的文本内容，或 aria-label 属性的值。如果不确定，请使用 logRoles 功能 或查阅可用角色列表。...getByTestId - 因为这不反映用户如何与应用交互，所以只推荐用于不能使用任何其他选择器的情况 如果您仍然无法决定使用哪个查询， 请查看 testing-playground.com 以及 screen.logTestingPlaygroundURL...甚至在其里面使用了 waitFor），但是 findBy... 更简单，我们得到的错误信息也会更好。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
云直播
对象存储
腾讯会议
