React测试库
（React Testing Library）是一种用于测试React应用程序的工具。它专注于测试React组件在用户交互过程中的行为和渲染结果。React测试库基于用户行为的理念，通过模拟用户在浏览器中的操作来测试组件的功能。
React测试库的特点和优势包括：
- 简单易用：React测试库提供了简洁的API和清晰的文档，使得测试React组件变得容易上手和理解。
- 用户行为驱动：React测试库鼓励开发者从用户的角度出发，通过模拟用户操作来测试组件的行为和渲染结果。
- 无需DOM测试：React测试库不依赖真实的DOM环境，而是通过渲染组件到虚拟DOM上，使得测试过程更加高效和独立。
- 可读性强：React测试库的断言语法采用类似于自然语言的方式，使得测试代码更易读、易维护。
React测试库的应用场景包括：
- 单元测试：React测试库可以用于对React组件的各个单元进行测试，验证其功能和行为是否符合预期。
- 集成测试：React测试库可以用于测试React组件之间的交互，确保整个应用程序的各个部分协同工作正常。
- 用户交互测试：React测试库可以模拟用户在浏览器中的行为，如点击、输入等，测试组件在用户交互过程中的响应和渲染。
腾讯云的相关产品和介绍链接如下：
- 腾讯云Serverless云函数（SCF）：腾讯云的无服务器计算服务，可以帮助开发者快速构建和部署云原生应用。详细介绍请参考：https://cloud.tencent.com/product/scf
- 腾讯云容器服务（TKE）：腾讯云的容器管理服务，支持Kubernetes，帮助开发者轻松管理和扩展容器化应用。详细介绍请参考：https://cloud.tencent.com/product/tke
- 腾讯云CDN：腾讯云的内容分发网络服务，可以加速静态资源的传输和分发，提升网站的访问速度。详细介绍请参考：https://cloud.tencent.com/product/cdn
请注意，以上仅为示例，实际选择使用的产品应根据具体需求和情况进行评估和选择。
相关·内容
1回答
刚开始学习测试库的React js.Some，比如chai，Sinon，testing和mocha用于单元测试。在react js中有没有可用于测试驱动开发实践的测试库？另一个问题是如何在react js中测试页面导航，因为一旦页面提交，状态和属性就会更新。注意:通过react路由器，它将导航到其他页面。如何编写集成测试的测试用例。
浏览 1提问于2018-06-18得票数 0
我使用react测试库(@jest library/react&@jest library/dom)和jest-dom(@jest library/jest-dom)编写了单元测试。我能够成功运行我的测试。
我没有使用jest/jest-cli完全包。我正在使用react测试库和jest-dom(@jest library /jest-dom)，它可能是一些子包，或者是一些我不确定该怎么称呼它的东西。
如何使用react测试库获得代码覆盖率？
浏览 4提问于2019-09-11得票数 14
2回答
快速总结-我有一个React应用程序。单元测试库是react测试库。该组件被封装在来自withRouter -router-dom的react中 问题-代码覆盖率显示为0%，即使它显示通过了8个测试和一些跳过的信息。如果我从withRouter中删除组件，代码覆盖率将显示正确的覆盖率结果。 请检查下面的代码，我正在尝试匹配快照。 // Profile.test.js
import React from "react";
import Profile from "./Profile";
import { withRouter } from "react-
浏览 23提问于2019-06-10得票数 0
3回答
Jest和酶有什么区别？
、、、、
我刚开始做单元测试。我想测试React项目。我从React文档开始，它将酶称为测试工具，这对我来说有点模糊。
Jest和enzyme有什么区别？
enzyme断言库还是任务运行程序？
我能用karma和Jasmine吗？
测试react-redux项目的最佳方法是什么？
浏览 9提问于2017-03-06得票数 47
2回答
我尝试使用react测试-库，但似乎不知道如何处理使用useContext的钩子。
import React,{useContext} from 'react'
import {AuthContextData} from '../../AuthContext/AuthContext'
const useAuthContext = () => {
const {authState} = useContext(AuthContextData)
const {isAuth,token,userId,userData} = authState
浏览 0提问于2019-03-29得票数 1
回答已采纳
是否可以仅使用Jest来测试有状态的react组件？我找不到任何例子可以在不使用任何其他库的情况下实现这一点，如酶或反应测试库。 我想要测试的示例代码， import React,{Component} from 'react';
class SampleComponent extends Component {
constructor(props) {
super(props)
this.state = {
username: '',
password: '',
loginMessa
浏览 13提问于2020-04-27得票数 0
回答已采纳
1回答
我试着用Jest测试一个React原生库，但是它显示了错误，有人能帮我解决我的问题吗？
这里是我的密码：
export const createChannel = (): void => {
PushNotification.createChannel({
channelId: 'test-channel',
channelName: 'Test Channel',
vibrate: true,
});
};
我对这个函数使用了function本机推送通知库。
这是我的测试代码：
import PushNotificatio
浏览 8提问于2022-06-10得票数 0
回答已采纳
我一直在使用“react-test-renderer”来测试react-native，主要是在它的函数上。最近我发现有一个用于react-native的测试库，它是@ that library /react-native。我想要做的是检查函数中是否调用了navigation.navigate或alert。我不知道这些库中有哪些可以做到这一点，以及如何做到这一点。
onSubmitPress = () => {
if (true) {
this.props.navigation.navigate('MainPage');
else {
showA
浏览 0提问于2020-06-02得票数 1
1回答
我是新的反应和尝试测试我的代码使用玩笑&测试-库/反应。
我做了一个简单的选择框，并在该框上触发了更改事件。我只想得到这个州，但我还是不知道怎么得到它。
这是我的组成部分：
import React from "react";
import ReactDOM, { render } from "react-dom";
import NativeSelect from "@material-ui/core/NativeSelect";
const MyTest = () => {
const [option, setOption
浏览 0提问于2019-09-06得票数 1
回答已采纳
1回答
我不明白为什么有些教程使用react-test-renderer和react-testing-library，
据我所知，react-test-renderer是一个库，它可以从react组件创建纯对象并将其转换为json快照！
import TestRenderer from 'react-test-renderer';
function Link(props) {
return <a href={props.page}>{props.children}</a>;
}
const testRenderer = TestRenderer.crea
浏览 7提问于2020-10-06得票数 1
我生成了一个项目，使用create和-typescript选项。
这是我的应用程序：
import React from 'react';
const App: React.FC = () => {
return (
<div className="App">
<div>
<h1 id="pageHeader">Home page</h1>
<p>This is the Home page</p&g
浏览 7提问于2019-12-09得票数 0
回答已采纳
我使用我们自己的库来进行API调用。在devDependencies中，我指定了该库。如果我运行npm install，我将获得node_modules下的库。在应用程序方面，它工作得很好。
当我尝试使用JEST时，我得到了意想不到的标记。
请在下面找到我的package.json，
{
"name": "myApp",
"version": "0.28.9",
"description": "My APP",
"main"
浏览 1提问于2019-01-10得票数 0
我为我的学校项目使用了react-native，并且像官方文档一样，我使用以下命令来创建新项目：
create-react-native-app AwesomeProject
它使用最新的react本机包创建一个项目，例如：
"react": "16.0.0-alpha.12",
"react-native": "^0.45.1",
现在，我想在我的项目中使用"react-number-format“，但是，我总是有一个依赖的问题。
npm WARN react-number-format@
浏览 1提问于2017-07-18得票数 0
1回答
我正在构建一个自定义的react组件库，以便与其他应用程序共享。我正在使用汇总和跟踪这个博客和其他几个：
我的rollup配置的相关片段如下所示：
export default [
{
input: "src/index.ts",
output: [ { file: packageJson.main, format: "esm", sourcemap: true } ],
plugins: [ peerDepsExternal(), resolve(), terser() ],
external: ["react&#
浏览 1提问于2022-05-09得票数 0
回答已采纳
1回答
在我的React应用程序中，我使用带有钩子和React测试库的功能组件进行测试。需要测试作为支柱传递给子函数的函数，代码如下所示
import React, { useContext, useEffect, useState } from "react";
export default function FileUploadContainer() {
const [state, dispatch] = useContext(Context);
const uploadFile = async (file, index) => {
// Code
浏览 3提问于2021-07-07得票数 0
我正在使用React应用程序中的mxGraph库。我需要为绘制图形的组件创建单元测试。我使用的是jest和react testing library。但是这个库不能渲染mxGraph的元素。也许是因为，在测试时，它不能定义屏幕分辨率，也不能正确地渲染。 是否有可能测试mxGraph绘图，或者是否有任何示例或实践？
浏览 17提问于2019-06-27得票数 3
回答已采纳
我正在尝试highcharts的写作测试。但是如何使用更大的数据集测试highchart，如何检查性能，以及如何测试highchart是否适用于更大的数据集。 库:Highchart- React -官方，Jest，React
浏览 66提问于2019-12-11得票数 0
1回答
我试图在我的react项目中使用react-dropdown-input库。
()
我使用了npm i react-dropdown-input并安装了它。
但是当我运行我的项目时，我会发现以下错误：
./~/react中的错误-下拉-输入/index.js
模块未找到:错误：
无法解析“路径\节点_模块\反应-下拉-输入”中的“react/addons”
这个也是
./~/react中的错误-下拉-输入/index.js
模块未找到:错误：
无法解析“路径\节点_模块\反应-下拉-输入”中的“react/lib/lib”
我还试图运行以下命令：npm install @typ
浏览 0提问于2019-05-09得票数 0
回答已采纳
我有一个图像滑块组件来显示来自我的Firebase数据库的图像，如下所示：
import React from 'react';
import Swiper from 'react-native-swiper';
import { View, StyleSheet, Image } from 'react-native'
const ImageSlider = ({images}) => {
return (
<Swiper autoplayTimeout={5}
style={st
浏览 15提问于2021-03-11得票数 1
回答已采纳
如何在Jest / React测试库中编写单元测试，以使用npm库react-error-boundary测试React的错误边界是否正常工作？例如。
const ErrorFallback = ({error}) => <p>There was an error!</p> // can use error.message later
const SimpleComponent = () => <h1>Hello, world</h1>
const TopLevelComponent = () => (
<
浏览 0提问于2021-10-11得票数 0
1回答
Jest的顺序测试场景
、、、、
我已经开始在我的React项目中使用，并且作为一个测试库，它附带了。
作为我的React应用程序的一部分，我喜欢创建集成测试(以及单元测试)，因为我发现能够检查应用程序中的快乐路径就像预期的那样是有用的。例如:使用呈现(挂载)一个页面，但只模拟http调用(使用)，以便立即执行完整的React/Redux流。
在使用create-react-app之前，我使用了Mocha进行测试，我发现是集成测试的一个很好的扩展，因为它允许按顺序执行组中的测试，并且在步骤失败时处理停止而不停止整个测试运行。
问题：有没有办法让Jest以类似的方式运行?具体来说，我希望能够在一个组中指定一系列测试(比如在des
浏览 3提问于2017-09-29得票数 2
回答已采纳
我刚刚开始使用react测试库，所以我猜想这最终是由于用户错误，但我看到了下面的行为，这对我来说没有意义。
对于以下测试，在新创建的CRA应用程序中运行，并使用jest-dom 3.0.0和react库5.4.4：
import React from "react";
import { render } from "react-testing-library";
import "jest-dom/extend-expect";
import Component from "./Component"
浏览 0提问于2019-01-10得票数 1
回答已采纳
我正在使用测试库和react
我的测试文件里有这个
import React from 'react' // best if I can skip this in every test file
import { render, screen } from '@testing-library/react'
但我有个错误
`@testing-library/react` import should occur before import of `react`
要么我按顺序关闭eslint规则，要么我可以跳过在每个测试文件中执行import React。
浏览 4提问于2022-08-21得票数 1
1回答
我正在调试第三方库单元测试。测试用例正在使用磁带和磁带运行。它使用下面的命令来运行测试用例。
"test": "browserify -x react-native -x react/addons -x react/lib/ReactContext -x react/lib/ExecutionEnvironment test/index.js -t [ babelify --presets [ es2015 react ] --plugins [ transform-decorators-legacy transform-class-properties ] ] | t
浏览 35提问于2017-12-23得票数 2
我试图在github页面上部署一个'hello world‘的react应用，但它不起作用。相反，我看到了404。
我按照下面的步骤操作-
首先，我在github上创建了一个名为test-react-deploy的存储库，并将其克隆到~/
然后我创建了一个新的react应用程序：
cd /tmp
npx create-react-app test-react-deploy
cd test-react-deploy
然后我将它的内容(没有.git文件夹)移动到我的应用程序存储库中：
cp -r .gitignore node\_modules package.json public s
浏览 20提问于2019-08-23得票数 2
回答已采纳
1回答
反应测试-库呈现函数抛出语法错误
、、、、
我正在尝试在我的项目中使用反应测试库。问题是，我不能把所有的东西都设置好。
我所采取的步骤：
如文档所示，我安装了@testing/react和jest-dom。
我设置了jest.config.js：
module.exports ={ setupFilesAfterEnv：‘@setupFilesAfterEnv-库/反应/清理-每一个之后’，}；
我写了基本测试：
从‘React’导入应用程序；从‘./ App’导入应用程序；从“@testing/react”导入{render }；它(‘呈现而不崩溃’，() => { const {asFragment} = rend
浏览 0提问于2019-07-05得票数 0
回答已采纳
3回答
不正确的测试执行队列
、、、
// file.spec.js
describe('[test]', () => {
it('first', () => {
expect(true).toBeTruthy();
});
it('second', () => {
expect(true).toBeTruthy();
});
});
在file.spec.js -> ctrl + S (首次保存)中：
[test]
first
second
在file.spec.js -> c
浏览 0提问于2018-04-03得票数 0
回答已采纳
我有一个使用create-react-app创建的项目。当我第一次创建该项目时，测试运行良好。在没有运行测试一段时间后，我决定运行测试(我还没有编写任何测试类，所以生成的测试类就是我所拥有的全部)，现在我得到了以下错误：
Determining test suites to run...Error: spawn git ENOENT
at Process.ChildProcess._handle.onexit (internal/child_process.js:178:32)
at onErrorNT (internal/child_process.js:344:16)
浏览 3提问于2017-04-26得票数 4
我是个新手，对所有的测试库都很困惑。我让我的测试代码正常工作，但为了使用它的toMatchSnapshot()，必须从react- test -renderer调用create()，并且为了使用它的断言，必须从@testing-library/react调用render()，这似乎是多余的。
import {render} from '@testing-library/react';
import {act, create} from 'react-test-renderer';
it('renders a login screen', ()
浏览 1提问于2019-11-01得票数 15
我不明白测试的全过程。我使用的是测试库，我觉得测试只是文本、标签，我觉得我不需要测试React或中的任何实现，这就是我在React测试库文档中看到的，因为总是强迫人们测试React实现。
现在，如果所有文本、标签和显示的值在我的测试中都是正确的，这意味着一切都应该是正常的，但不幸的是，当我使用Redux时，我总是被迫测试Redux实现(模拟存储、模拟还原器等等)。以及异步行为()，比如获取数据等等。
为什么我需要并被迫测试Redux实现，只要我能够测试显示的值，通过的测试总是表明Redux实现在我的项目中正确工作？
浏览 3提问于2020-10-13得票数 0
回答已采纳
每次新的尝试我都会得到2箱：
“无效钩子调用”-由于双重反应环境。
“无法解决”--如果我要从钩子库中的devDependencies中删除它。
目标是:建立正确的钩子库构建环境。
webpack.config.js
const path = require("path")
module.exports = {
mode: "production",
entry: "./src/index.ts",
output: {
filename: "index.js",
path:
浏览 6提问于2022-08-27得票数 5
回答已采纳
我构建React应用程序已经有一段时间了，所以我想做一个React组件库。我一直在阅读有关方法的文章，并采用了一种方法，在这种方法中，您可以使用Webpack和Babel来绑定而不使用React，因为如果您不这样做，将会出现错误，因为将导入两个版本的React (一个在组件库中，一个在应用程序中)。无论如何，我有一个Jest安装文件，其中包含以下内容： import { configure } from 'enzyme'
import Adapter from 'enzyme-adapter-react-16'
configure({ adapter: ne
浏览 54提问于2019-10-09得票数 0
回答已采纳
我使用创建了一个react库，并成功地将它用于其他React项目。但是，当我试图在库中使用react函数时，它会给出以下错误。
Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2.
浏览 0提问于2019-05-07得票数 38
回答已采纳
1回答
请问如何使用react测试库为我的组件编写单元测试？ 我做错了什么？ 组件： const ErrorModal = (props: {message: string}) => {
const { message } = props;
return (
<ErrorModalStyled>
<ErrorMessageStyled data-testid="id">{ message }</ErrorMessageStyled>
</ErrorModalStyled&g
浏览 18提问于2021-04-07得票数 0
1回答
我知道我的问题非常抽象，但我很难理解什么应该/不应该在React应用程序中测试。
我正在寻找的东西:类似Git的流行项目的存储库，带有高级的react&jest和酶测试，我可以把它作为一个现实的例子。
谢谢!
浏览 1提问于2019-03-22得票数 0
回答已采纳
问题：我有多个下拉列表，我正在检查其中是否有一个是打开的。我如何在React测试库中做到这一点？(我正在查看一堆tabIndexes并检查它们)
问题： container.querySelectorAll在react测试库中是不可能的。
代码：
it('should not expand dropdown for multiple view', () => {
const { container } = render(
getMockedComponent()
)
expect(container).toBeVisible()
浏览 8提问于2020-09-23得票数 7
我的组件->
export default()=>{
const [list, setList] = useState([])
const handleAddToList = () => {
//makes an api call and sets the list state.
setList(response);
}
return (
<div>
<Button onClick={hanldeAddToList}>add to list</Button>
{
list.map(row=><span>{row.
浏览 2提问于2021-11-12得票数 1
回答已采纳
认识到React Native应用程序是为使用模拟器开发/测试而设计的，是否可以使用web浏览器来测试应用程序？
像这样的服务是存在的，但我担心的是它是由提供支持的，它可能会受到每月分钟数的限制。与付费屏幕流媒体服务相比，我也想利用免费/开源技术来实现这一点。
沿着这些思路，为了在浏览器中测试应用程序，应用程序是否需要使用一个或多个库，这些库允许应用程序在React Native和简单的React中运行？我想找到这种特殊方法的替代方法，因为我想专门为React Native编写代码。
浏览 0提问于2016-03-14得票数 81
回答已采纳
我正在使用react-native init创建一个react-native项目。我正在为SQLite绑定使用库。
我有一个DbConnector.jest-test.js单元测试文件。内容是
import DbConnector from '../app/components/DbConnector.js';
// Note: test renderer must be required after react-native.
import renderer from 'react-test-renderer';
it('renders correc
浏览 0提问于2017-07-25得票数 5
我正在使用Jest测试一个React应用程序。对于每个测试中需要的一些公共库/功能，我总是重复相同的导入语句。我想知道是否有办法让Jest在每次测试之前导入这些库。
浏览 15提问于2022-03-07得票数 3
回答已采纳
假设我有这个功能反应组件。
const SomeComponent = ({ onShow }) => {
React.useEffect(onShow, []);
return <div />;
};
现在我要进行单元测试，SomeComponent在第一次呈现时调用onShow。
可以用enzyme吗？
我试过实现两种非常相似的测试，区别是第一种是使用酶，另一种是使用反应测试库。
使用react测试库的测试通过了，但是酶测试失败了，尽管它们测试的代码相同。
示例：
import * as reactTestingLibrary from "react-t
浏览 1提问于2019-05-10得票数 3
1回答
火基网或反应-本机-火基
、、、、
我正在为后端构建一个带有Firebase的，而且我无法找到好的信息来帮助我决定是否应该使用官方的firebase web库，或者是使用React本机-防火墙库。
说
随着3.1.0SDK中的更新，几乎所有JavaScript SDK的功能都应该在React中顺利工作
但是在，它说
Web不支持Firebase的许多服务。
通常，我会决定使用官方的Firebase，但我看到有很多人抱怨它，所以我不知道该怎么办。如有任何建议/帮助，将不胜感激。谢谢。
浏览 0提问于2018-10-16得票数 4
我需要在react redux应用程序中使用deep-freeze库深度冻结整个redux状态，以检查状态上的任何突变。我应该如何在react redux应用中使用深度冻结来实现这一点？
浏览 2提问于2018-02-18得票数 1
我试图为使用的组件编写一个单元测试。
正在测试的组件模块的简化版本：
MyComponent.js
import React from 'react';
export default () => <h1>Tadaa!!!</h1>;
MySuspendedComponent.js
import React, { Suspense } from 'react';
import MyComponent from './MyComponent';
export default () => (
<Su
浏览 0提问于2019-01-02得票数 0
回答已采纳
在向项目中添加反应测试库时遇到困难.
项目目前正在使用这些版本。
"react": "16.10.2",
"react-dom": "16.10.2"
"jest": "24.9.0"
我将这些版本添加到反应测试库中
"@testing-library/dom": "^6.10.0",
"@testing-library/jest-dom": "^4.2.2",
"@testing-library/react":
浏览 3提问于2019-11-01得票数 1
回答已采纳
4回答
我试图弄清楚如何测试React (而不是反应性JS)组件。即使查看ReactiveNative初学者代码，也很难看到如何测试它。
var AwesomeProject = React.createClass({
render: function() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
Welcome to React Native!
</Text>
<T
浏览 5提问于2015-08-14得票数 13
回答已采纳
如何使用jest和react测试库来模拟TRPC客户端的单元和集成测试？
浏览 13提问于2022-11-22得票数 0
我知道我们可以使用React Testing Library来测试组件标签测试。但出于我的好奇心，我想知道是否有任何方法可以使用这个库对react组件进行端到端测试。 如果我能得到一些有用的信息，我将不胜感激。
浏览 19提问于2020-11-05得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
