- 综合排序
- 最热优先
- 最新优先
- 来自专栏黄啊码【CSDN同名】
Vite 2.0 + Vue 3.0 + Test Unit 配置
spec/.test 渲染 components 以及 vue 运行支持需要@babel/preset-env jest 不支持 ES6/ESM 模块规则，用以支持转换@testing-library/jest-dom 仅有依赖关系的话，那么就可以一次就安装完它们npm install --save-dev @babel/core @babel/preset-env @types/jest @testing-library/jest-dom
1.7K21编辑于 2022-07-15 - 来自专栏前端小码农
Jest 单元测试快速上手指南
react-dom 和声明 yarn add -D @types/react安装 react 测试库 yarn add -D @testing-library/react @testing-library/jest-dom import React from 'react'; import { render } from '@testing-library/react'; import '@testing-library/jest-dom from 'react'; import { render, fireEvent } from '@testing-library/react'; import '@testing-library/jest-dom from 'react'; import { render, fireEvent } from '@testing-library/react'; import '@testing-library/jest-dom
4.2K30发布于 2020-08-25 - 来自专栏vae
初始化React脚手架
logo.svg //logo图 reportWebVitals.js //页面性能分析文件（需要web-vitals库支持） setupTests.js //组件单元测试文件（需要jest-dom
46510编辑于 2022-09-22 - 来自专栏Web大前端
Jest与React Testing Library：前端测试的最佳实践
安装和配置首先，确保你已经安装了react, react-dom, jest, @testing-library/react, 和 @testing-library/jest-dom。 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 .toBeInTheDocument();});组件库的测试对于复杂的组件库，可以创建一个setupTests.js文件来设置全局的模拟和配置，例如：import '@testing-library/jest-dom
1.8K00编辑于 2024-06-14 - 来自专栏全栈者
用Jest来给React完成一次妙不可言的~单元测试
当我们点击按钮时，测试计数器的增减是否正确: import React from 'react'; import "@testing-library/jest-dom/extend-expect"; import 测试初始状态是否为0: TextContext.test.js import React from 'react' import "@testing-library/jest-dom/extend-expect TestRouter.test.js import React from 'react' import "@testing-library/jest-dom/extend-expect"; import 来验证数据是否正确获取和显示: TextAxios.test.js import React from 'react' import "@testing-library/jest-dom/extend-expect 它为我们提供了访问 jest-dom 匹配器的机会，以及最佳实践，使得我们可以使用它来更有效地测试我们的组件。希望这篇文章是有用的，它将帮助您在未来构建更加健壮的 React 应用程序。
16.6K33发布于 2020-03-30 - 来自专栏TangPiece
单元测试
@testing-library/jest-dom 是一个用于增强 Jest 测试框架的库，它提供了一组用于 DOM 断言的定制化匹配器和工具函数。 当需要基于DOM元素进行匹配测试时，推荐引入@testing-library/jest-dom。 render, screen } from '@testing-library/react'; import React from 'react'; import '@testing-library/jest-dom screen, waitFor } from '@testing-library/react'; import React from 'react'; import '@testing-library/jest-dom import { render } from '@testing-library/react'; import React from 'react'; import '@testing-library/jest-dom
2.4K10编辑于 2024-01-12 - 来自专栏全栈学习
前端反卷计划-组件库-04-Button组件开发
reactjest-domhttps://testing-library.com/docs/ecosystem-jest-dom/增加dom操作的类型断言npm install @testing-library/jest-dom --save-devcreate-react-app已经帮我们导入了src/setupTests.ts// jest-dom adds custom jest matchers for asserting toHaveTextContent(/react/i)// learn more: https://github.com/testing-library/jest-domimport '@testing-library/jest-dom
72010编辑于 2023-11-27 - 来自专栏海怪的编程小屋
使用 React Testing Library 的 15 个常见错误
toBeDisabled() // error message: // Received element is not disabled: // <button /> 上面的 toBeDisabled 来自 jest-dom 强烈建议大家使用 jest-dom，因为你能获得更好的错误信息。 建议：用 @testing-library/jest-dom 这个库 将不必要的操作放在 act 里 重要程度：中 // ❌ act(() => { render(<Example />) })
1.8K20编辑于 2022-05-09 - 来自专栏前端自习课
【总结】1796- 原生 canvas 如何实现大屏?
// jest-dom adds custom jest matchers for asserting on DOM nodes. import "@testing-library/jest-dom";
59040编辑于 2023-09-14 - 来自专栏AllTests软件测试
UI自动化常用库介绍及示例（三）
3.3 安装 在React项目中，通过npm安装核心库及断言扩展库： npm install --save-dev @testing-library/react @testing-library/jest-dom 注意：@testing-library/jest-dom提供了DOM相关的断言方法（如toBeInTheDocument()），需在测试文件中导入或配置全局引入。 AllTests软件测试 import { render, screen, fireEvent } from'@testing-library/react'; import'@testing-library/jest-dom test 关键说明：render()用于渲染React组件到虚拟DOM；screen对象提供全局查询方法；fireEvent用于模拟用户交互（如点击）；断言方法需依赖@testing-library/jest-dom
32710编辑于 2025-12-21 - 来自专栏人生得意须尽欢
package.json文件知多少？
first-react-app", "version": "0.1.0", "private": true, "dependencies": { "@testing-library/jest-dom
72610发布于 2021-09-26 - 来自专栏腾讯IVWEB团队的专栏
【译】使用Enzyme和React Testing Library测试React Hooks
： 1、初始待办事项的渲染 2、我们可以加一个新的待办事项 3、我们可以删除一个待办事项 首先，我们安装需要的安装包： npm install --save-dev @testing-library/jest-dom /Todo"; import "@testing-library/jest-dom/extend-expect"; test("Todo", () => { // Tests go here }
4.9K30发布于 2020-06-28 - 来自专栏前端Q
原生 canvas 如何实现大屏?
// jest-dom adds custom jest matchers for asserting on DOM nodes. import "@testing-library/jest-dom";
57320编辑于 2023-08-23 - 来自专栏云开发
Webify 新增自动适配框架和一键部署能力
package.json 示例 { "dependencies": { "@testing-library/jest-dom": "^5.11.4", "@testing-library
76520发布于 2021-08-11 - 来自专栏精益码农
大前端快闪：package.json文件知多少？
first-react-app", "version": "0.1.0", "private": true, "dependencies": { "@testing-library/jest-dom
82430发布于 2021-10-14 - 来自专栏前端魔法指南
2022年3月最新Eslint + Prettier + Husky + Stylelint + Jest + CI/CD 超详细前端单元测试&规范工程化工作流
接着在根目录创建jest.setup.js，内容可以暂时为空 编写第一个React测试用例 with 「ReactTestingLibrary」 安装依赖包 pnpm i -D @testing-library/jest-dom @testing-library/react 在jest.setup.js写入全局配置 import '@testing-library/jest-dom'; 写第一个测试用例： // home.test.tsx
2.4K10编辑于 2022-08-12 - 来自专栏前端小歌谣
react源码解析手写ReactDom.js和React
React 17.0.2 目录结构 创建项目 首先npx create-react-app xxx 降为17 "dependencies": { "@testing-library/jest-dom
48730编辑于 2023-10-19 - 来自专栏资料笔记
React脚手架
logo.svg ------- logo图reportWebVitals.js--- 页面性能分析文件(需要web-vitals库的支持)setupTests.js---- 组件单元测试的文件(需要jest-dom
94620编辑于 2023-11-27 - 来自专栏伟大程序猿的诞生
React目录结构详细解析
"dependencies": { "@testing-library/jest-dom": "^4.2.4", "@testing-library/react": "^9.5.0",
2.8K41编辑于 2021-12-06 - 来自专栏web全栈之路
前端接入单元测试(Node+React)
/src/components/Todo";import "@testing-library/jest-dom/extend-expect";it("components Todo", () => {
4.4K30编辑于 2023-06-14
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号