- 综合排序
- 最热优先
- 最新优先
- 来自专栏前端小码农
Jest 单元测试快速上手指南
React 组件 安装 react 依赖 yarn add react react-dom 和声明 yarn add -D @types/react安装 react 测试库 yarn add -D @testing-library /react @testing-library/jest-dom 添加 typescript 配置文件 tsconfig.json { "compilerOptions": { /react'; import '@testing-library/jest-dom/extend-expect'; import Title from '.. /react'; import '@testing-library/jest-dom/extend-expect'; import Count from '.. /react'; import '@testing-library/jest-dom/extend-expect'; import Button from '..
4.2K30发布于 2020-08-25 - 来自专栏Web 技术
搞懂了，React 中原来要这样测试自定义 Hooks
使用 @testing-library/user-event 库模拟用户事件。 对呈现的输出进行断言。 以下测试中，我们依据上述的步骤来验证 Counter 组件的功能: import { render, screen } from '@testing-library/react' import { Counter /Counter' import user from '@testing-library/user-event' describe('Counter', () => { test('renders }; }; 接着，让我们来探索一下如何使用 React Testing Library 对它进行测试： // useCounter.test.tsx import { render } from "@testing-library 因此，我们对测试代码进行如下更改： // useCounter.test.tsx import { renderHook, act } from '@testing-library/react' import
1.7K40编辑于 2023-10-07 - 来自专栏Web大前端
Jest与React Testing Library：前端测试的最佳实践
安装和配置首先，确保你已经安装了react, react-dom, jest, @testing-library/react, 和 @testing-library/jest-dom。 在你的package.json中添加以下依赖：npm install --save-dev jest @testing-library/react @testing-library/jest-dom# 或yarn add --dev jest @testing-library/react @testing-library/jest-dom在jest.config.js中配置Jest，例如：module.exports = { setupFilesAfterEnv: ['@testing-library/jest-dom/extend-expect'], testEnvironment: 'jsdom',};基本测试结构创建一个测试文件 下面是一个简单的组件测试示例：import React from 'react';import { render, fireEvent, screen } from '@testing-library/
1.8K00编辑于 2024-06-14 - 来自专栏TangPiece
单元测试
@testing-library/jest-dom 是一个用于增强 Jest 测试框架的库，它提供了一组用于 DOM 断言的定制化匹配器和工具函数。 当需要基于DOM元素进行匹配测试时，推荐引入@testing-library/jest-dom。 @testing-library/user-event 是一个用于模拟用户事件的 JavaScript 库。 /react'; import React from 'react'; import '@testing-library/jest-dom'; import userEvent from '@testing-library Form } from 'antd'; import '@testing-library/jest-dom'; import { renderHook } from '@testing-library
2.4K10编辑于 2024-01-12 - 来自专栏云前端
前端单元测试，更进一步
一般也用 @testing-library 来搭配 vitest，提供 DOM 等核心测试能力。 LoginForm.stories.js|jsx import React from 'react'; import { within, userEvent } from '@storybook/testing-library FilledForm.play = async ({ canvasElement }) => { const canvas = within(canvasElement); // 复用单测中的 testing-library 需要做的也非常简单，直接在单测中 import 后 play 就是了： // foo.spec.jsx import { render } from '@testing-library/react';
1.6K00编辑于 2023-03-08 - 来自专栏海怪的编程小屋
如何测自定义的 React Hooks？
比如： import {render, screen} from '@testing-library/react' import userEvent from '@testing-library/user-event 这就是为什么会有 @testing-library/react-hooks，如果我们用了它，会变成这样： import {renderHook, act} from '@testing-library/ 实际上，@testing-library/react-hooks 底层也是做了一些和我们上面 setup 类似的事。 当然，肯定会有更复杂的 Hooks，使用 @testing-library/react-hooks 则更有用。 好了，这篇外文就给大家带到这里了。 这篇文章也给我们带来了两种测试 Hooks 的思路：使用 Test Componet 以及 @testing-library/react-hooks。
1.1K20编辑于 2022-05-09 - 来自专栏前端专享
[TDD] 如何测试 React 异步组件？
，这次我将继续使用 @testing-library/react 来测试我们的 React 应用，并简要简要说明如何测试异步组件。 import React from "react"; import { render } from "@testing-library/react"; import Login from ". /react"; import userEvent from "@testing-library/user-event"; import Login from ". /登录/ })); expect(submittedData).toEqual({ username, password }); }); 我们可以选用 @testing-library 现在我们已经有了 mock，让我们来渲染组件，并且界面显示 loading: import React from "react"; import { render, screen } from "@testing-library
4.5K50编辑于 2021-12-31 - 来自专栏海怪的编程小屋
测试中如何处理 Http 请求？
/react' import userEvent from '@testing-library/user-event' import {client} from '~/utils/api-client' /react' import userEvent from '@testing-library/user-event' beforeAll(() => jest.spyOn(window, 'fetch /react' import userEvent from '@testing-library/user-event' test('clicking "confirm" submits payment /react' import userEvent from '@testing-library/user-event' test('clicking "confirm" submits payment /react' import userEvent from '@testing-library/user-event' // 啥也不需要改 test('clicking "confirm" submits
1.8K10编辑于 2022-08-31 - 来自专栏神光的编程秘籍
React 组件如何写单元测试？
App 组件是这样的： 它的单测是这么写的： 通过 @testing-library/react 的 render 函数把组件渲染出来。 第一种方法的 screen 是 @testing-library/react 提供的 api，是从全局查找 dom，可以直接根据文本查（getByText），根据标签名和属性查（getByRole） 等 import { render, fireEvent } from '@testing-library/react'; import Toggle from '. 这个 createEvent 也是 @testing-library/react 提供的 api，用来创建事件的。 绝大多数情况下，直接 fireEvent.xxx 就好了。 主要是用 @testing-library/react 这个库，它有一些 api： render：渲染组件，返回 container 容器 dom 和其他的查询 api fireEvent：触发某个元素的某个事件
1.2K20编辑于 2023-08-28 - 来自专栏前端专享
如何测试 React 路由 ？
，这次我将继续使用 @testing-library/react 来测试我们的 React 应用，并简要简要说明如何测试路由系统。 测试方法 我们知道 @testing-library/react 是运行在 node 环境中的，但浏览器中并没有 HashRouter 或者 BrowserRouter ，所以我们需要一个用到 MemoryRouter </Routes> </HashRouter> ) } export default App 此时我们可以添加单元测试 import { render, screen } from '@testing-library /react' import userEvent from '@testing-library/user-event' import { createMemoryHistory } from 'history
2.5K20编辑于 2022-03-30 - 来自专栏前端专享
如何测试 React 路由 ？
，这次我将继续使用 @testing-library/react 来测试我们的 React 应用，并简要简要说明如何测试路由系统。 测试方法 我们知道 @testing-library/react 是运行在 node 环境中的，但浏览器中并没有 HashRouter 或者 BrowserRouter ，所以我们需要一个用到 MemoryRouter Routes> </HashRouter> ); } export default App; 此时我们可以添加单元测试 import { render, screen } from "@testing-library /react"; import userEvent from "@testing-library/user-event"; import { createMemoryHistory } from "history
2.6K20编辑于 2022-01-20 - 来自专栏海怪的编程小屋
使用 React Testing Library 的 15 个常见错误
) // ✅ import {render, screen} from '@testing-library/react' 现在cleanup 都是自动调用的，所以你已经不再需要再考虑它了。 直接在 render 引入的时候一并引入就可以了： import {render, screen} from '@testing-library/react' 使用 screen 的好处是：在添加/删除 建议：用 @testing-library/jest-dom 这个库 将不必要的操作放在 act 里 重要程度：中 // ❌ act(() => { render(<Example />) }) 我们现在还在进行 @testing-library/user-event 这个库的开发，来保证它能像它承诺的那样：能够触发用户在执行特定操作时会触发的所有相同事件。 不过，现在它还没完全做到这一点，这也是为什么它还没有合入 @testing-library/dom （可能在未来的某个时候会合入）。
1.8K20编辑于 2022-05-09 - 来自专栏Cellinlab's Blog
React 应用架构实战 0x7：测试
/react"; import userEvent from "@testing-library/user-event"; import { AppProvider } from "@/providers not.toBeInTheDocument(); }); }, { timeout: 5000, } ); }; export * from "@testing-library // src/testing/setup-tests.ts import "@testing-library/jest-dom/extend-expect"; import { queryClient # 安装及配置 Cypress 安装 Cypress pnpm add -D cypress @testing-library/cypress 配置 Cypress cypress.config.ts command -- // Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... }) import "@testing-library
2.1K80编辑于 2023-05-17 - 来自专栏人生得意须尽欢
package.json文件知多少？
： { "name": "first-react-app", "version": "0.1.0", "private": true, "dependencies": { "@testing-library /jest-dom": "^5.14.1", "@testing-library/react": "^11.2.7", "@testing-library/user-event": "^
72210发布于 2021-09-26 - 来自专栏前端开发
如何模拟React组件环境进行自定义Hooks的测试？
以下是具体方法和工具使用指南：核心工具与原理@testing-library/react-hooks：专门为测试 Hooks 设计的库，提供了模拟组件环境的能力核心原理：通过创建一个临时的 React 安装依赖npm install --save-dev @testing-library/react-hooks react-test-renderer# 或yarn add --dev @testing-library
24910编辑于 2025-08-17 - 来自专栏前端小歌谣
react源码解析手写ReactDom.js和React
react源码部分的实现 环境 React 17.0.2 目录结构 创建项目 首先npx create-react-app xxx 降为17 "dependencies": { "@testing-library /jest-dom": "^5.11.4", "@testing-library/react": "^11.1.0", "@testing-library/user-event": "^
48230编辑于 2023-10-19 - 来自专栏全栈程序员必看
PyCharm for Anaconda
/jest-dom": "^4.2.4", "@testing-library/react": "^9.3.2", "@testing-library/user-event": "^7.1.2 /user-event@7.2.1" has unmet peer dependency "@testing-library/dom@>=5". [4/4] Building fresh packages /jest-dom@4.2.4 ├─ @testing-library/react@9.4.0 ├─ @testing-library/user-event@7.2.1 ├─ @types/jest@24.9.0 /dom@6.11.0 ├─ @testing-library/jest-dom@4.2.4 ├─ @testing-library/react@9.4.0 ├─ @testing-library/user-event /user-event@7.2.1" has unmet peer dependency "@testing-library/dom@>=5". success Uninstalled packages
1.7K30编辑于 2022-09-27 - 来自专栏云开发
Webify 新增自动适配框架和一键部署能力
package.json 示例 { "dependencies": { "@testing-library/jest-dom": "^5.11.4", "@testing-library /react": "^11.1.0", "@testing-library/user-event": "^12.1.10", "react": "^17.0.2",
76320发布于 2021-08-11 - 来自专栏精益码农
大前端快闪：package.json文件知多少？
: { "name": "first-react-app", "version": "0.1.0", "private": true, "dependencies": { "@testing-library /jest-dom": "^5.14.1", "@testing-library/react": "^11.2.7", "@testing-library/user-event": "^
82030发布于 2021-10-14 - 来自专栏全栈者
用Jest来给React完成一次妙不可言的~单元测试
import React from "react"; import { render, fireEvent } from "@testing-library/react"; import Counter App.test.js import React from 'react' import {render, cleanup} from '@testing-library/react' import App { render, cleanup, fireEvent } from '@testing-library/react'; import TestEvents from '.. TestRouter.test.js import React from 'react' import "@testing-library/jest-dom/extend-expect"; import { Router } from 'react-router-dom' import { render, fireEvent } from '@testing-library/react' import
16.5K33发布于 2020-03-30
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号