如何使用React Testing Library模拟点击Material UI RadioGroup选项？
React Testing Library是一个用于测试React组件的工具库。它提供了一组简单的API来模拟用户与组件的交互，并验证组件的行为和输出。
要模拟点击Material UI RadioGroup选项，可以按照以下步骤进行：
- 安装依赖：
- 安装依赖：
- 导入必要的库和组件：
- 导入必要的库和组件：
- 编写测试用例并使用React Testing Library进行渲染：
- 编写测试用例并使用React Testing Library进行渲染：
在上述代码中，我们首先使用React Testing Library的render函数将RadioGroup及其选项渲染到测试环境中。然后，我们使用screen.getByRole或screen.getAllByRole函数来获取所有的Radio元素，并通过fireEvent.click模拟点击第一个选项。最后，我们使用expect进行断言，验证第一个选项是否被选中。
需要注意的是，上述示例只是简单的模拟了点击选项的操作和验证是否选中，你可以根据实际需求编写更复杂的测试用例。
推荐的腾讯云相关产品：无
参考链接：
- React Testing Library官方文档：https://testing-library.com/docs/react-testing-library/intro/
- Material UI官方文档：https://mui.com/
相关·内容
我如何编写一个react测试库测试脚本来验证点击Material UI单选按钮？下面是我遇到的问题的再现。 import React from 'react';
import Radio from '@material-ui/core/Radio';
import RadioGroup from '@material-ui/core/RadioGroup';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import FormControl
浏览 25提问于2021-05-03得票数 1
回答已采纳
我尝试使用material-ui中的Alert组件，并成功安装了@material-ui/core，但仍然出现错误Can't resolve '@material-ui/core/Alert‘。 package.json “”“ {
"name": "client",
"version": "0.1.0",
"private": true,
"dependencies": {
"@material-ui/core": "^4.12.3
浏览 43提问于2021-09-22得票数 0
1回答
我在开发一个使用MERN的web应用程序。我已经安装了@material ui/core，但它正在抛出一个类似于模块的错误: Error:无法解决‘@material ui/core’中的'C:\Users\Meenakshi\OneDrive\Documents\react应用程序\memories\client\src‘我的导入文件是-
import React from "react";
import { Container, AppBar, Typography, Grow, Grid } from "@material-ui/core";
im
浏览 4提问于2022-08-22得票数 0
``` "dependencies": {
"@emotion/react": "^11.10.4",
"@emotion/styled": "^11.10.4",
"@material-ui/core": "^5.0.0-beta.5",
"@material-ui/lab": "^5.0.0-alpha.44",
"@mui/icons-material": "^5.10.6",
"@mui/material
浏览 13提问于2022-10-15得票数 -2
回答已采纳
我试着用Material UI做一个react日期范围选择器。首先，我在使用makeStyles时遇到了一些问题，我用withStyles解决了这个问题:从‘@material-ui/styles’导入{ withStyles }； 现在我遇到了这个问题：“错误:您正在使用一个未定义的组件调用withStyles(样式)(组件)。” ? 下面是我的代码结构： import { withStyles } from '@material-ui/styles';
const useStyles = withStyles((theme) => ({
...
)
浏览 11提问于2021-07-01得票数 0
1回答
我有问题，更改表格页面，它显示错误，无论是否单击更改页面按钮错误看起来像这样 ? 降级资料-ui/core对我没有帮助这是我的库版本 "@material-ui/core": "^4.12.2",
"@testing-library/jest-dom": "^5.14.1",
"@testing-library/react": "^11.2.7",
"@testing-library/user-event": "^12.8.3",
浏览 17提问于2021-07-30得票数 0
如何测试Material-UI值按钮的更改以及设置为本地状态(UseState)值的RadioGroup属性‘RadioGroup’的后续更改 On change事件应该触发我模拟过的handleChange describe("test", () => {
test(`radio`, () => {
const handleChange = jest.fn();
const component = shallow(
<App />
);
const radioGroup = component.fin
浏览 28提问于2020-10-18得票数 1
1回答
在尝试安装资料ui时，会得到大量的依赖项解析错误。不太清楚原因是什么。我以前尝试过安装V4，但得到了一个错误，我认为我可以通过使用V5来解决这个错误，因为这个版本的React与V4不兼容，但是我不知道其余的冲突。
npm i @mui/material @emotion/react @emotion/styled
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: @material-ui/core@4.12.4
npm ERR! Found: react@1
浏览 11提问于2022-11-19得票数 0
我正在尝试通过运行以下命令来安装库@material-ui/pickers： npm i @material-ui/pickers 但是这个错误显示出来了： npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: five@0.1.0
npm ERR! Found: react@17.0.1
npm ERR! node_modules/react
npm ERR! react@"^17.0.1" from th
浏览 151提问于2021-02-01得票数 1
我尝试了npm install @emotion/react和npm install @emotion/styled解决方案，但未清除错误。 热心的帮助 "dependencies": {
"@emotion/styled": "^11.3.0",
"@material-ui/core": "^4.12.3",
"@mui/material": "^5.1.0",
"@testing-library/jest-dom": "
浏览 28提问于2021-11-10得票数 0
我正在使用Material UI和React，虽然在我的Windows和Ubuntu上应用程序运行正常，但在我的同事Mac和Ubuntu上，编译器给出了这个错误：
npm ERR! Error while executing:
npm ERR! /usr/bin/git ls-remote -h -t ssh://git@github.com/ethereumjs/ethereumjs-abi.git
以下是依赖关系：
"dependencies": {
"@emotion/react": "^11.4.0",
"@emo
浏览 5提问于2021-07-14得票数 1
我使用RadioButton组件在我创建的组件中显示问题的不同选项：
import FormControl from "@material-ui/core/FormControl";
import FormControlLabel from "@material-ui/core/FormControlLabel";
import Grid from "@material-ui/core/Grid";
import Radio from "@material-ui/core/Radio";
import RadioGroup fro
浏览 1提问于2019-10-06得票数 2
4回答
如何使材料-UI单选按钮浮动:左
、、、、
在上面的演示中，您可以看到工作代码，无论如何，您很难尝试将单选按钮水平对齐。
有一个简单的方法来做这个材料-用户界面吗？或者我必须自己设计自己的收音机按钮，我可以在5分钟内完成。
import React from "react";
import PropTypes from "prop-types";
import { withStyles } from "@material-ui/core/styles";
import Radio from "@material-ui/core/Radio";
import Ra
浏览 0提问于2018-05-22得票数 1
回答已采纳
我在材料界面上有问题。它适用于我的前两个项目，但现在突然显示出以下错误：
未找到模块:无法解决‘@material/图标/添加’中的‘E：\Projects\slack\slack-clone\src’
这是我的一个组成部分：
import React from 'react';
import "./Header.css";
import { Avatar } from '@material-ui/core';
import AddIcon from '@material-ui/icons/Add';
function Hea
浏览 3提问于2021-05-02得票数 0
在运行npm test时，我得到了以下错误：
Cannot find module 'react-dom/client' from 'node_modules/@testing-library/react/dist/pure.js'
Required stack:
node_modules/@testing-library/react/dist/pure.js
node_modules/@testing-library/react/dist/index.js
所有必要的软件包似乎都安装好了。我重新安装了react-dom，但没有帮助。下面提供在我的测试文件中使用
浏览 9提问于2022-04-01得票数 83
回答已采纳
2回答
我正在尝试将npm install react-material-ui-carousel --save添加到我的react项目中。然而，当我试图安装时，我会遇到这个依赖树问题。
I已经删除了锁和npm模块文件，然后是整个项目的npm install。但是，下面仍然会出现同样的错误。
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: buckets@0.1.0
npm ERR! Found: react@17.0.1
npm
浏览 6提问于2021-03-02得票数 0
我有一个react，但大多数情况下，当我对源代码进行更改时，浏览器会重新加载新代码，但是在整个应用程序中都会注入一个iframe。
我已经检查了我的源代码，当然我不是自己做的，我还查看了我安装的Chrome扩展，基本上就是这些(复制所有的Urls、Google离线、Redux DevTools、Redux DevTools)。
我在package.json文件中安装的所有库都是
{
"name": "react-ui-generator",
"version": "0.0.0",
"private&#
浏览 9提问于2022-03-16得票数 5
3回答
import FileBase from 'react-file-base64';
当我在VS代码中悬停三点指示器后，我得到了一个错误。
除了插入图像的MongoDB部分之外，我的设置已经成功了(其他输入字段已经成功地插入了filebase64云中)。
模块"d:/nodejs/memories_project/client/node_modules/react-file-base64/build/build.min“找不到模块‘react file -base64 64’的声明文件。'd:/nodejs/memories_project/client/nod
浏览 2提问于2021-02-18得票数 1
我在react构建上遇到了运行时错误，否则它会与yarn start完美地工作在一起。我在chrome控制台上连续读到了两个"Uncaught :M is not defined“。应用程序的主要依赖项是deck.gl、mapbox和material-ui。Node版本v14.15.5和npm版本6.14.11。我怀疑这与捆绑过程有关。让我知道我还能提供什么来解决这个问题。
可供参考的项目依赖列表：
"@babel/plugin-syntax-jsx": "^7.12.13",
"@babel/plugin-transform-r
浏览 6提问于2021-02-19得票数 0
1回答
我试图尝试使用实质性用户界面，但在第18.2节中遇到了问题。我需要进口下列物品：
import { MuiThemeProvider, createTheme } from '@material-ui/core/styles'
但是，当我运行npm install @material-ui/styles时，我会得到以下错误：
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: zscratch@0.1.0
npm
浏览 6提问于2022-08-22得票数 3
回答已采纳
1回答
响应依赖树问题
、、
有人能告诉我这里有什么不对吗？我正在尝试安装梅花搜索栏组件。
npm i --save material-ui-search-bar
然而，我确实收到以下信息：
PS Z:\WebDev\ApplyWithin\frontend> npm i --save material-ui-search-bar
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: new@0.1.0
npm ERR! Found: react@17.
浏览 9提问于2021-12-26得票数 2
回答已采纳
1回答
请让我从@mui/资料库获得这个错误，我已经检查了mui/system的package.json，并且它已经在其中导出了alpha。
./node_modules/@mui/material/styles/index.js
Attempted import error: 'alpha' is not exported from '@mui/system'.
下面是应用程序的package.json
"dependencies": {
"@date-io/date-fns": "1.x",
"
浏览 6提问于2022-01-09得票数 3
回答已采纳
1回答
当我在路由外调用组件时，它工作得很好，但在路由内却不能工作。 App.js文件为： import './App.css';
import Login from './Components/Login/Login';
import { BrowserRouter as Router, Switch, Route, Redirect } from "react-router-dom";
import Protected from './Components/Common/Protected';
function App() {
浏览 15提问于2021-09-02得票数 0
我试图执行一个旧的反应应用，这是由我自己两年前创建的。当我试图通过"npm安装“运行该应用程序时，我得到了以下错误：
npm ERR! must provide string spec
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\tws80\AppData\Local\npm-cache\_logs\2022-01-09T21_00_13_180Z-debug.log
我的package.json文件的依赖性：
"dependencies": {
浏览 41提问于2022-01-09得票数 7
回答已采纳
2回答
在以下时间点之后，npm start命令无法继续执行-
由于此原因，应用程序无法加载。
下面是package.json -
{
"name": "reacttest",
"version": "0.1.0",
"private": true,
"dependencies": {
"@material-ui/core": "^4.12.1",
"@material-ui/data-grid": "^4.0
浏览 3提问于2021-07-12得票数 2
如果npm安装，我会收到以下错误
我也尝试过像这样清理缓存
如果我直接运行这个项目，它显示的是react，它显示的是“react脚本”不被识别为内部或外部命令。
这是我的项目中使用的package.json代码，我不知道问题是什么，因为我对react.let来说还是新手，我知道如何运行这个项目。提前谢谢..。
{
"name": "pay-management",
"version": "0.1.0",
"private": true,
"dependencies
浏览 8提问于2022-06-30得票数 -1
回答已采纳
1回答
在我的React项目上进行了一个通用的包升级之后，JavaScript中的SCSS变量导入停止了工作。导入本身仍然工作，但是从SCSS导出的变量从未出现在JavaScript中。
我正在做的事情是：
_variables.scss:
$akt-dark-teal: #035164;
$akt-light-blue: #007FAA;
:export {
primaryMain: $akt-dark-teal;
secondaryMain: $akt-light-blue;
}
反应中的：
import scss from './scss/parts/_variable
浏览 5提问于2021-04-22得票数 2
回答已采纳
错误是：
export 'FormHelperText' (imported as 'FormHelperText') was not found in '@material-ui/core/FormHelperText' (possible exports: default).
我尝试了多种导入方式，我在node_modules中删除并安装了@material-ui/core，但它不起作用，当它修复导入中的问题时，它会在另一个导入中产生其他问题
import React,{Component} from 'react'
impo
浏览 0提问于2021-10-12得票数 0
我试图添加搜索图标从材料UI，但我得到了这个错误。“错误:无效的挂钩调用。只能在函数组件的主体内调用挂钩。”我尝试了YouTube的亚马逊克隆教程，并且做了所有的事情。有人能帮我吗？谢谢。 这是我的Header.js import React from "react";
import "./Header.css";
import { Link } from "react-router-dom";
import SearchIcon from '@material-ui/icons/Search';
function Heade
浏览 9提问于2021-01-20得票数 1
5回答
我对ReactJs很陌生，我正在尝试使用react的资料UI库来实现TabContext，并且我得到了上面的错误。我想是因为路径。我试图再次安装资料界面，但没有帮助。我要分享我的code.Please支票
my-app/src/App.js
import logo from './logo.svg';
import './App.css';
import Navbar from './Components/Navbar';
import Form from './Components/Form';
function App()
浏览 6提问于2021-08-21得票数 0
回答已采纳
我试图在一个定制的可重用组件上完成一个jest测试，但很难让它工作。我已经在沙箱中使用普通的material-ui组件对其进行了裁剪，但在模拟单选按钮单击时仍有困难。我试过了 wrapper.find(Radio).first().simulate('click');
wrapper.find(Radio).first().prop('onChange', { target: { checked: true } });
wrapper.find(Radio).first().simulate('change', {
浏览 61提问于2020-01-08得票数 1
我试图在react上部署一个heroku应用程序，但是在将它部署到heroku显示的空白页面后，我还使用buildpack mars/create-react-app创建了这个应用程序
这就是我在已部署的项目上要做的：
这是我的package.json文件：
{
"name": "covid-19",
"version": "0.1.0",
"private": true,
"homepage": "covid-19-stat
浏览 5提问于2020-08-06得票数 1
我正在做一个React项目，我正在尝试使用这个库()
从npm和文档中，他们说我们必须添加这些指令来导入CSS
我的组件
import React from 'react'
import "~react-image-gallery/styles/css/image-gallery.css";
import "~react-image-gallery/styles/scss/image-gallery.scss";
import ImageGallery from 'react-image-gallery';
export fu
浏览 3提问于2021-12-21得票数 2
回答已采纳
我正在尝试使用gh-pages部署我的react应用程序，上传后我发现了白色页面。我尝试了许多解决方案，但都不起作用。 这是url： https://mosherad.github.io/spreago-react/ 这是json文件 {
"name": "spreago",
"version": "0.1.0",
"private": true,
"dependencies": {
"@apollo/react-hooks": "^3.1.3
浏览 19提问于2020-01-14得票数 1
当我选择Add单选按钮并点击upload按钮时，我想上传一个excel表格。 现在，只要我点击选择文件，我的文件就会被上传。我希望当我点击Upload按钮时就会发生这种情况。 我一上传文件就在控制台看到了文件数据。 我是学习反应的初学者。提前谢谢。 import React, { useState } from "react";
import * as XLSX from "xlsx";
import "./../accordian.css";
import { makeStyles } from '@material-ui/c
浏览 9提问于2021-09-03得票数 0
回答已采纳
1回答
我使用ckeditor5包添加了npm add file:./ckeditor5。当我运行代码时，代码工作正常，但是当我构建它时，我会得到一个npm ERR! client@0.1.0 build: react-scripts build错误。
我猜npm add file:./ckeditor5命令的问题。下面是package.json文件
{
"name": "client",
"version": "0.1.0",
"private": true,
"dependencies
浏览 9提问于2021-08-16得票数 0
回答已采纳
1回答
React与开发非常不同。
、、、、
谢谢你想帮我！
当我构建我的React应用程序时，它看起来与开发模式非常不同。我使用serve -s build来观察应用程序何时生成。但在我的在线Digitalocean服务器上，它看起来和开发中的不一样。因此，它可能与反应或它是如何建造的有关。这是一种发展模式：
这就是建造它的时候：
因此，它看起来CSS或Javacript没有正确编译。这是我的package.json
{
"name": "websitedominique",
"version": "0.1.0",
"private"
浏览 5提问于2022-03-09得票数 0
1回答
克隆项目安装错误
、、
我从repo获得了这个项目，并使用git克隆复制了它。
然后我转到我克隆它的目录。
接下来，我使用NPM 命令安装了这个项目，这些错误发生在：-
下面是JSON文件
{
"name": "grocery-storeowner-frontend",
"version": "0.1.0",
"private": true,
"dependencies": {
"@material-ui/core": "^4.12.4",
"
浏览 6提问于2022-10-29得票数 0
我正在用材料ui组件开发react js应用程序。在我的应用程序中，我没有使用过redux。 一切都很正常。但是当我尝试实现material ui自动完成时，它在webpack中不起作用。它抛出了这个错误 这是我试图添加到我的应用程序中的示例代码。https://codesandbox.io/s/test-material-ui-autocomplete-o3uic Uncaught TypeError: Object(...) is not a function
at useAutocomplete (useAutocomplete.js:241)
at Autocompl
浏览 15提问于2020-03-22得票数 3
2回答
用反应式组件进行测试.测试.库
、、、、
我目前正在尝试用模拟的提供程序测试一个样式化的组件，如下所示：
import React from "react";
import TestResults from "./TestResults";
import {
render,
cleanup,
findByTestId,
findByText,
waitForElement,
} from "@testing-library/react";
import { MockedProvider } from "@apollo/react-testing";
浏览 3提问于2020-06-09得票数 4
回答已采纳
1回答
我在每一行中创建了多个Radiogroup。每一行由3个FormControlLabel组成：
import React, { Component } from 'react'
import FormControl from '@material-ui/core/FormControl';
import Radio from '@material-ui/core/Radio';
import RadioGroup from '@material-ui/core/RadioGroup';
import FormControlLabe
浏览 2提问于2020-08-11得票数 0
回答已采纳
当我试图安装npm install的时候，我得到了以下错误，请有人告诉我，解决这个问题的最好方法是什么。由于这个错误，我的构建在netlify中失败了。
错误：$
npm install
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: sssclub@0.1.0
npm ERR! Found: react@18.1.0
npm E
浏览 32提问于2022-06-13得票数 27
回答已采纳
我已经阅读了文档，但我有困难如何在材料UI的样式工作。 基本上，我有以下无线电群组组件： import React from 'react'
import Radio from '@material-ui/core/Radio'
import RadioGroup from '@material-ui/core/RadioGroup'
import FormControlLabel from '@material-ui/core/FormControlLabel'
import FormControl from '@ma
浏览 18提问于2020-11-03得票数 1
回答已采纳
我正在尝试做一个类型记录前端，但是我不能使用react-dom/client导入，因为我已经将问题缩小到测试-库/ react版本，而不是与我的react版本相对应。我尝试过多个降级版本，但似乎无法让它发挥作用。
有什么解决办法吗？我将在下面附上我的package.json文件。
{
"name": "balls",
"version": "0.1.0",
"private": true,
"dependencies": {
"@material-ui/core
浏览 4提问于2022-05-16得票数 10
2回答
我正在尝试构建我的反作用应用程序。但是当我运行"npm运行构建“时，终端就冻结了”创建和优化生产构建.“永远都不会结束。这是我的JSON文件。我也试过16 GB的内存。
我已经删除了包锁文件，也重新生成了依赖项。但还是一样的。任何地方都没有具体的解决方案，如果有人有解决方案，请告诉我。
{
"name": "demoapp",
"version": "0.1.0",
"private": true,
"dependencies": {
"@emotion/re
浏览 4提问于2021-12-06得票数 3
我正在制作一个简单的基于REST的Express-React Node-MySQL堆栈。
架构
客户端-响应JS / Mui客户端文件
服务器-节点- MySQL -快捷框架
Ubuntu
网络
443港口转发，即所有在或土地上提出的请求到我家。
是的，我有一个域名，即或
使用Cloudflare管理域通信量。
正如您可能知道的，cloudflare只接受端口443、2053、2083等作为安全的https端口，我被迫将reactjs默认端口从3000更改为2053，因为linux不允许非root用户使用1000以下的端口。在我的机器中，
浏览 11提问于2022-01-16得票数 0
回答已采纳
我已经尝试了堆栈溢出的所有方法，但它没有work.Can有人告诉我是怎么回事？
错误:无效的挂钩调用。钩子只能在函数组件的主体内调用。这可能是由以下原因之一造成的：
您可能有不匹配的React版本和渲染器(如React DOM)您可能违反了钩子规则您可能在同一应用程序中有多个React副本，请参见..有关如何调试和修复此问题的提示，请参阅。
index.js
import React from 'react';
import ReactDOM from 'react-dom';
// import * as serviceWorker from './s
浏览 18提问于2021-05-18得票数 0
1回答
我正在使用Jest和Enzyme启动测试组件React，因此无法使用发出的导入文件运行测试成功。
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import './_rollupPluginBabelHelpers-3c58f0e3.js';
SyntaxError: Cannot use import statement out
浏览 0提问于2020-12-16得票数 0
在使用npm install为我的项目安装依赖项时，我收到以下错误，我不知道如何解释：
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: soft-ui-dashboard-pro-react@3.1.0
npm ERR! Found: react@17.0.2
npm ERR! node_modules/react
npm ERR! react@"17.0.2" from the root projec
浏览 120提问于2022-03-23得票数 6
回答已采纳
在我对react应用程序进行最近的更改之前，我的网站运行得很好。当我部署这些更改时，网页上会出现"Invalid Host header“。
这是我的代码结构：
我可以配置什么来消除这个错误？
这是我的package.json文件：
{
"name": "client",
"proxy": "http://127.0.0.1:4000",
"version": "0.1.0",
"private": true,
"dependencies
浏览 0提问于2020-12-26得票数 1
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
