使用react- Testing -library测试MUI复选框
React Testing Library是一个用于测试React组件的工具库，它提供了一组简单且直观的API，帮助开发者编写可靠、可维护的测试代码。
MUI（Material-UI）是一个流行的React UI组件库，提供了丰富的可重用组件，用于构建现代化的用户界面。
使用React Testing Library测试MUI复选框，可以按照以下步骤进行：
- 安装所需的依赖：
- 安装所需的依赖：
- 创建一个测试文件，例如
Checkbox.test.js。 - 导入所需的依赖：
- 导入所需的依赖：
- 编写测试用例：
- 编写测试用例：
- 在上述测试用例中，第一个测试用例用于确保复选框能够正常渲染，而第二个测试用例则测试了复选框的点击事件是否能够正确改变其选中状态。
- 运行测试：
- 运行测试：
以上是使用React Testing Library测试MUI复选框的基本步骤。对于更复杂的测试场景，可以结合其他工具和技术，如Mock函数、异步测试等来完成。同时，腾讯云也提供了一系列与云计算相关的产品，如云服务器、云数据库、云存储等，可以根据具体需求选择适合的产品进行开发和部署。
更多关于React Testing Library的信息和使用方法，可以参考腾讯云的官方文档：React Testing Library。
相关·内容
1回答
测试库(VueJS) -在it块中呈现多个组件
javascript、unit-testing、vue.js、testing-library
相对较新的测试，所以这可能非常简单： 我想测试一个checkbox组件。我已经掌握了基础知识，但是，如何在it块中呈现多个组件呢？ 到目前为止我的代码。我被困在第二个测试中，我想渲染多个项目并检查一个项目。这应该会返回它的值(或者我们可以测试选中的复选框)。 组件本身非常简单。它有一个标签和复选框元素，并接收你所期望的所有属性。 谢谢! import { render } from '@testing-library/vue';
import OBCheckbox from '../OBCheckbox.vue';
describe('OBCheck
浏览 18提问于2020-11-25得票数 0
1回答
反应测试库模拟点击事件不起作用？
reactjs、jestjs、antd、react-testing-library
一个简单的测试用例: testClick.js
import React from 'react'
import { Button } from 'antd'
export default function testClick() {
const onClick = () =>{
console.log("2333")
}
return (
<Button onClick={onClick}>testClick</Button>
)
}
testClick.test.js
impor
浏览 1提问于2022-11-09得票数 -1
回答已采纳
2回答
在Jest不工作的情况下模拟常量(同一个测试文件中的多个模拟)
reactjs、jestjs、mocking、react-testing-library
我遇到的问题是，在jest.doMock之后，模拟的常量不会在组件中发生变化。
看一看。
我尝试过用mock代替doMock- -同样的错误。
App.test.js
import React from "react"
import App from './App'
import '@testing-library/jest-dom'
import { render } from "@testing-library/react";
describe('testing app.js', () => {
浏览 0提问于2020-11-18得票数 5
回答已采纳
1回答
expect(...).toHaveAttribute不是一个函数-为什么？
reactjs、unit-testing、testing、jestjs、react-testing-library
我创建了一些基本的测试，并遵循Jests网站上的入门指南，但toHaveAttribute显然不是一个功能 import React from "react";
import { fireEvent, render } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { App } from "../App";
test("allows users to add items to th
浏览 44提问于2021-01-29得票数 6
回答已采纳
3回答
无法从'node_modules/@testing-library/react/dist/pure.js‘中找到模块“react/client”
reactjs、typescript、unit-testing
在运行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回答
如何测试按钮是否被点击？
javascript、reactjs、jestjs、react-testing-library
我在和React测试库一起工作。我遇到的问题是，fireEvent不触发，错误抛出如下所示：
Expected number of calls: >= 1
Received number of calls: 0
对于这个特殊的测试，我需要使用@testing-library/react-hooks吗？是否需要将产品组件包装在导入函数的上下文提供程序上？
Product.tsx组件
import React, { FunctionComponent } from "react";
import { useProducts } from "./Cont
浏览 4提问于2022-05-17得票数 1
1回答
如何测试下拉选择器是否设置了与React测试库相对应的值？
reactjs、unit-testing、types、react-testing-library、react-hook-form
具有以下代码：
import { useForm, Controller } from 'react-hook-form';
...
const { handleSubmit, reset, control, register, watch } = useForm({
resolver: yupResolver(schema)
});
const sensorOptions = [
{ id: '0', name: 'sensor 0' },
浏览 8提问于2022-01-15得票数 0
回答已采纳
1回答
反应测试库获取元素
reactjs、react-testing-library
我有一个简单的测试，因为我正在学习反应测试库。我基本上把这个从网站上删除了。这是我的测试：
import React from 'react';
import {render, screen, fireEvent} from '@testing-library/react'
import DateInput from '../dateInput';
test('calls onChange event is fired', () => {
const onChange =
浏览 4提问于2022-02-09得票数 0
1回答
无法触发“单击”事件-请提供DOM元素-单选按钮JestJ
reactjs、unit-testing、jestjs
我正在编写测试来点击值“绿色”单选按钮使用Jest并作出反应。我正面临一个错误
收音机按钮：<input id="multicolored" name="colours" type="radio" value="green"> id="radioButton" aria-label="Radio Button" name="radio-button-field">
无线电测试：
import React from 'react';
import {
浏览 7提问于2020-12-31得票数 4
回答已采纳
2回答
如何断言该方法被调用
reactjs、jestjs、react-testing-library
这是我的表格：
import { useState } from "react"
import { Form, Button, Row, Col } from "react-bootstrap"
import { actions as parametersActions } from "../../actions/ParametersActions"
import { connect } from "react-redux"
export const Parameters = props => {
const [
浏览 4提问于2021-10-08得票数 0
回答已采纳
1回答
响应测试库--模拟一个函数
reactjs、function、jestjs、mocking、react-testing-library
我正在尝试测试一个函数被调用
import React from 'react';
import { render, cleanup, fireEvent } from '@testing-library/react';
import '@testing-library/jest-dom';
import MyForm from './MyForm';
afterEach(cleanup);
const testFunction = jest.fn();
test('my form', () => {
浏览 1提问于2021-09-03得票数 4
回答已采纳
2回答
使用react-testing library的Render方法不起作用
reactjs、jestjs、react-testing-library
我尝试测试react-testing-library文档中提供的基本示例。我准确地复制并粘贴了这段代码
无论发生什么，它都会失败。
下面是失败的测试结果：
shows the children when the checkbox is checked
TypeError: Cannot read property 'current' of undefined
34 | test('shows the children when the checkbox is checked', () => {
35 | const
浏览 0提问于2019-08-17得票数 1
1回答
为什么查询在单独的“in”测试块中失败
javascript、reactjs、react-testing-library、testing-library
我有一个React组件。我用Jest作为跑步者编写测试，并编写测试库来编写测试。
注册组件代码(使用物化进行样式设计)是：
import React, { useState } from "react";
import Card from "@material-ui/core/Card";
import CardActions from "@material-ui/core/CardActions";
import CardContent from "@material-ui/core/CardContent";
import B
浏览 23提问于2022-11-16得票数 0
回答已采纳
1回答
无法使用jest单击按钮并对组件测试用例作出反应测试库
reactjs、typescript、jestjs、react-testing-library
嗨，我是一个新的反应测试库，我试着写一个测试用例，但是在测试用例中没有得到想要的结果。需要一些指导。在执行npm运行测试时，它显示了预期的呼叫数>=1，接收到的呼叫数为0。
下面是我的代码片段- Lgin.ts
import React,{SyntheticEvent} from 'react'
const Lgin: React.FC = ()=> {
const handleClick = (e: SyntheticEvent)=>{
console.log('hello');
}
return (
<>
<bu
浏览 3提问于2022-03-15得票数 0
回答已采纳
1回答
userEvent.type只输入最后一个字符时包装在act中。
javascript、reactjs、jestjs、react-testing-library
我在用户事件github中发现了一个问题，它说它在12.0.1版本中得到了解决，但是我使用的是12.1.5版本，我一直收到错误。
import React, { Fragment } from "react";
import { render, act } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import App from "./App";
test("Gets a code and ren
浏览 0提问于2020-09-18得票数 5
3回答
React测试库- TypeError: actImplementation不是一个函数
javascript、reactjs、jestjs、react-testing-library
我得到了TypeError:在对这个组件进行简单测试时，actImplementation不是一个函数
import React from 'react';
import { StyledHeaderContainer, StyledTitle } from './styled';
export const Header = () => {
return (
<StyledHeaderContainer>
<StyledTitle data-testid='title-test-id'>Su
浏览 23提问于2022-04-01得票数 4
回答已采纳
1回答
使用/ Jest模拟axios帖子
reactjs、unit-testing、axios、jestjs、react-testing-library
我正在努力弄清楚如何在我的反应测试中正确地模拟这个Axios帖子。似乎文档和教程中到处都是他们是如何做到这一点的，没有很强的共识或最佳实践。
下面是我的测试: BatchList.test.js
import React from 'react';
import { setupWorker, rest } from 'msw';
import {
render,
screen,
within,
fireEvent,
waitFor,
} from '@testing-library/react';
impo
浏览 1提问于2021-10-14得票数 2
2回答
当使用react- test -library在表单中提交时，如何测试已调用的函数？
reactjs、jestjs、react-testing-library
在我的React Signup组件中是一个表单，用户可以在其中输入他们的电子邮件、密码和密码确认。我正在尝试使用jest/react- test -library编写测试，但是我一直收到测试失败的消息，因为接收到的函数调用数为0，而预期调用数为1。
我尝试过Jest匹配器的变体，例如.toHaveBeenCalled()、.toHaveBeenCalledWith(arg1，arg2，...)、toBeCalled()，所有这些匹配器仍然期望1或更大的值，但都失败了，因为接收到的数字是0。我已经尝试了fireEvent.click和fireEvent.submit，它们仍然失败。
Signup
浏览 23提问于2019-11-07得票数 6
2回答
react-test-renderer的create()与@test-library/react的render()
reactjs、react-testing-library、react-test-renderer
我是个新手，对所有的测试库都很困惑。我让我的测试代码正常工作，但为了使用它的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
1回答
waitFor不工作反应测试库
javascript、reactjs、react-testing-library
我正在尝试在执行测试用例的其余部分之前出现一个删除图标，这个测试用例问题正发生在waitFor的react测试库中。
我的进口品
import { render, screen, waitFor, fireEvent } from '../../../TestMocks/CustomRender';
import DraftPage from '../DraftPage';
import '@testing-library/jest-dom';
import React from 'react';
草案页-显示实际代码的一小部分
浏览 13提问于2022-06-16得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
