react-testing-library中的fireevent问题
react-testing-library是一个用于测试React组件的工具库。它提供了一组简单而强大的API，用于模拟用户与组件的交互，并对组件的渲染结果进行断言。
fireEvent是react-testing-library中的一个函数，用于触发各种用户事件，例如点击、输入、提交等。它模拟了用户与组件的交互行为，以便测试组件在不同交互情况下的行为和渲染结果。
使用fireEvent可以通过以下方式触发不同的事件：
- 点击事件：fireEvent.click(element)。可以用于模拟用户点击某个元素，例如按钮、链接等。
- 输入事件：fireEvent.input(element, { target: { value: 'input value' } })。可以用于模拟用户在输入框中输入内容。
- 提交事件：fireEvent.submit(element)。可以用于模拟用户提交表单。
- 更多事件：fireEvent.change(element, { target: { value: 'new value' } })、fireEvent.select(element)等。可以根据需要模拟其他用户事件。
fireEvent的使用可以帮助我们编写更全面的测试用例，覆盖组件的不同交互情况，确保组件在各种情况下都能正确渲染和响应。
推荐的腾讯云相关产品和产品介绍链接地址：
- 云服务器（CVM）：提供弹性计算能力，满足不同规模和需求的应用场景。产品介绍链接
- 云数据库MySQL版（CDB）：提供高可用、可扩展的MySQL数据库服务。产品介绍链接
- 云存储（COS）：提供安全可靠、高扩展性的对象存储服务。产品介绍链接
- 人工智能机器学习平台（AI Lab）：提供丰富的人工智能算法和模型，帮助开发者快速构建和部署AI应用。产品介绍链接
- 物联网开发平台（IoT Explorer）：提供全面的物联网解决方案，帮助开发者连接、管理和控制物联网设备。产品介绍链接
请注意，以上推荐的腾讯云产品仅供参考，具体选择应根据实际需求和项目情况进行。
相关·内容
我正在尝试使用react-testing-library测试redux-form中的代码。为文本输入字段调用fireEvent.change来设置新值我希望输入的值应该被更新，但它从来没有发生过。请在下面找到测试的片段。完整的代码可以在上找到任何好的例子如何使用react-testing-library测试redux-form？
..。
const firstNameInput = getByTestId(container, "firstName");
const lastNameInput = getByTestId(container, "lastName"
浏览 1提问于2019-06-16得票数 7
我似乎无法解析为什么会收到这个错误:以下是我的配置： lang-js
react - 15.3.1
react-dom - 15.3.1
react-testing-library - 6.0.0
jest - 23.6.0
lang-js
import React from 'react';
import { render, fireEvent, cleanup } from 'react-testing-library';
afterEach(cleanup);
test('loads and displays ', async()
浏览 17提问于2019-03-15得票数 2
1回答
Warning: validateDOMNesting(...): <tbody> cannot appear as a child of <div>.
in tbody (created by TableBody)
in TableBody (created by TableBody)
in TableBody
问题：
如何将TableBody组件呈现为table元素，而不是react-testing-library使用的默认div？
补充信息：
我尝试将选项传递到react-testing-library、render()、函数中，但似乎无法
浏览 0提问于2018-07-06得票数 5
回答已采纳
我现在正在学习React-Testing-Library。 我想测试鼠标与元素的交互。目前我还不清楚userEvent.click(element)和fireEvent.click(element)之间的区别。都是推荐使用的，在下面的示例中，它们是否被正确实现？ const mockFunction = jest.fn(() => console.info('button clicked'));
const { getByTestId } = render(<MyAwesomeButton onClick={mockFunction} />);
const
浏览 90提问于2020-09-22得票数 19
回答已采纳
我想知道如果有一个组件呈现在一个酶的js-dom包装器中，我可以对它使用react- that library。我想在react-testing-library中加入fireEvent方法，而不是酶的simulate方法。我想要使用的包装器应该是这样的： const wrapper = mount(<App />);
浏览 23提问于2019-06-23得票数 0
回答已采纳
我正在尝试测试组件是否因输入元素中的更改而按其应有的方式进行更新。我使用fireEvent.change()-function，如果我随后使用getByPlaceholderText检查我找到的节点的值，它已经按照应该的方式进行了更新。但是，我看不到react组件本身的变化。
这可能是因为更改直到重新渲染才会发生；我如何测试这一点？react-testing-library的rerender似乎是“从头开始”(即没有新的输入值)，并且waitForElement永远不会找到它正在等待的东西。
下面是组件TestForm.js：
import React from 'react'
浏览 3提问于2018-11-23得票数 8
回答已采纳
我一直在尝试记录URL更改点击锚标签。虽然这在实际页面上有效，但当我用Jest编写测试时，它就不起作用了。
下面是代码：
import { renderApp } from "<src>/tests/util";
import { fireEvent, wait } from "react-testing-library";
import {
getLocationAPath,
getLocationBPath,
getLocationCPath
} from "<src>/paths";
let ge
浏览 0提问于2019-02-14得票数 1
回答已采纳
我正在学习如何使用进行单元测试反应组件
但是，当我的目标是将测试分解为describe()函数中的较小块时，组件呈现是正确的。测试结束了，原因如下。
当前只有一个或另一个test()通过，但不是两者都通过。
import React from 'react'
import 'react-testing-library/cleanup-after-each'
import { render, fireEvent } from 'react-testing-library'
import Quantity from '../component
浏览 0提问于2019-04-20得票数 1
回答已采纳
我正在将一个类组件重构为一个函数组件。
在我的测试文件中，我使用的是酶，但我正在迁移到react-testing-library
这是我用酶做的测试
it('should change module when clicked button login', () => {
const wrapper = mount(<SignUp setModuleCallback={jest.fn()} />)
const instance = wrapper.instance()
jest.spyOn(instance, 'setMo
浏览 2提问于2020-12-01得票数 1
2回答
我有一个输入组件，它接受一个prop方法，并在用户输入某些内容时调用它。代码本身按照预期工作，但由于某些原因，测试失败。它认为道具方法没有被调用。为什么会这样？为了测试目的，我使用Jest和react测试库。
还有第二个问题。在实际应用中，我的想法是测试传递给该支柱方法的参数。它是否被认为是一种实现测试(我知道我应该测试它)？
Input.js
export default function Input({ onChange }) {
return <input onChange={onChange} />;
}
测试
import React from
浏览 0提问于2019-03-02得票数 4
回答已采纳
我想做什么
我希望在某些测试期间(使用react-testing-library和jest)将一些自定义属性传递给事件。我正在使用fireEvent函数。我从中了解到，第二个参数中的属性被添加到事件中。这是我目前所不能做的。
最小可重现性示例
import React from 'react'
import { render, fireEvent } from '@testing-library/react'
test('check event', () => {
const DOM = render(
<div
浏览 1提问于2020-10-21得票数 3
回答已采纳
1回答
测试反应形式内部提交
、、、、
我有这样的组成部分：
function Form() {
const [value, setValue] = useState('');
const hanleSubmit = (ev) => {
ev.preventDefault();
console.log('submit', value);
}
return (
<form onSubmit={props.onSubmit}>
<input type="text" value={value} onChange={e
浏览 8提问于2021-12-14得票数 0
2回答
选项卡键压不改变焦点元素
、、、、
注意:这与模拟按键本身无关
我正在创建一个基于用户键盘事件(如按enter、箭头等)来处理焦点的组件。
最好是测试组件是否忽略按键上的选项卡键。
但是，在触发keydown选项卡事件时，焦点不会像浏览器中那样改变。
给出Component.js中的反应组分
import React from 'react'
export default () => (
<>
<button data-testid="one">
one
</button>
<button data-tes
浏览 1提问于2019-04-30得票数 6
1回答
我已经使用react-testing-library设置了Jest，并且我已经编写了一个测试： describe("Some Functionality", () => {
it("Should add a given product to the cart state", async () => {
const state = getMockState();
const { result: { getByTestId }, store } = deepRender(
<ProductView /&g
浏览 30提问于2020-12-23得票数 0
1回答
例如，我正在尝试测试一个组件，该组件使用React Loadable呈现两个异步导入的子对象，比如Modal。我的测试如下所示 // Using React Testing Library
import { fireEvent, getByTestId, wait } from 'react-testing-library';
test('with RTL', async () => {
// There is a portal. I leave it in the code sample in case it gives any hints
浏览 18提问于2019-03-15得票数 2
回答已采纳
12回答
App.js
import React, { Component } from "react";
import Select from "react-select";
const SELECT_OPTIONS = ["FOO", "BAR"].map(e => {
return { value: e, label: e };
});
class App extends Component {
state = {
selected: SELECT_OPTIONS[0].value
};
handl
浏览 0提问于2019-04-08得票数 62
回答已采纳
我正在转移到反应测试库的过程中，并且不知道如何触发这个事件并得到更改的结果。
我尝试过使用fireEvent函数触发更改，然后尝试使用rerender函数，但我似乎无法让它工作。
App.js
import React, { useState } from "react";
import logo from "./logo.svg";
import "./App.css";
const options = {
DoTheThing: 'DoTheThing',
DoOtherThing: 'DoOtherThin
浏览 1提问于2019-02-15得票数 31
回答已采纳
我想测试一下我的第三方库(iframe-resizer)函数是否被调用。我的测试 import React from 'react';
import { fireEvent, render } from 'react-testing-library';
//import * as depModule from 'iframe-resizer';
let depModule = require("iframe-resizer")
import { MyComponent } from '../my-component&#
浏览 17提问于2019-02-20得票数 1
我正在尝试测试一个使用Controller呈现的组件，该组件来自react-hook-form和react-testing-library <Controller
render={({ onChange, onBlur, value }) => (
<IonInput
onIonChange={onChange}
onIonBlur={onBlur}
value={value}
浏览 27提问于2020-10-14得票数 0
回答已采纳
典型的网上购物商店。我正在尝试测试这样一个场景:当用户尝试下订单时，AJAX请求会失败。用户也可以选择订阅服务，但只有在订单放置成功的情况下才会请求此订阅。
为了测试这个失败的场景，我使用了一个承诺拒绝的方法，但是隐藏的错误会冒出来，导致测试失败。
有没有人知道我如何测试这一点，最好不要将catch添加到Confirmation组件的onSubmit方法中的链接中？react-testing-library的Jest或wait是否提供了测试此场景的替代方法？
我知道Jest提供了，但我无法弄清楚我应该如何调整我的测试以使它与wait一起工作。
构成部分：
class Confirmatio
浏览 0提问于2019-01-18得票数 0
1回答
我有一个带有请求api的方法的react组件。出于测试目的，我模拟了模块axios。Jest不能识别get的第一个调用，但不能识别post的第二个调用，除非它是在get语句之前声明的。我可以记录axios.post.mock.result在我的react组件中有一个值的承诺。在我的测试中，它是空的。我像这样隔离了这个问题： 我的组件方法 import axios from 'axios';
async getData(data) {
let response = await axios.get('/api',
{
params: {
浏览 19提问于2019-02-21得票数 2
回答已采纳
新的反应。测试依赖于其他组件中的操作的组件值更新的正确方法是什么？使用jest + react-testing-library。 假设只有2个组件(同级)和一个通过全局状态更新的值。 下面是测试结果： it('updates default value on for submit click', async () => {
const username = 'hello';
const {getByTestId, container, rerender} = render(<App/>);
//subscribe
浏览 37提问于2018-12-24得票数 1
我正在尝试使用typescript中的react-testing-library创建一个带有样式Material-UI组件的测试。我发现很难访问组件的内部函数来模拟和断言。
Form.tsx
export const styles = ({ palette, spacing }: Theme) => createStyles({
root: {
flexGrow: 1,
},
paper: {
padding: spacing.unit * 2,
margin: spacing.unit * 2,
t
浏览 1提问于2019-05-01得票数 16
1回答
我正在尝试用Jest为一个使用来自react-transition-group的Transition的React组件编写一个单元测试。我需要模拟Transition，这样我的测试就不必等待动画完成。但是，除了“跳过”动画之外，我还需要在模拟的Transition组件上触发onExited回调。
下面是我的Component.js如何使用Transition
...
return (
<Transition
timeout={1500}
in={this.state.show}
onExited={handleExited}>
{status =&
浏览 117提问于2018-10-24得票数 4
回答已采纳
1回答
如何对屏蔽输入进行单元测试？
、、、、
如何使用react-testing-library对被屏蔽的输入字段进行单元测试。该组件是使用material ui和react-hook-form开发的。在这里你可以找到代码，并在我这边的例子上工作。提前感谢
测试文件：
let Phone_Input = getByTestId("phone-input");
fireEvent.change(
<InputMask mask="(999) 999-9999">{() => Phone_Input}</InputMask>,
{
t
浏览 0提问于2020-02-25得票数 5
我正在转移到react测试库的过程中，并且很难断言文本在某种状态下发生了变化。我要测试的是“第二个选项被选中”文本或节点的外观。但这只是失败了，因为节点没有改变。不过，它可以在浏览器中工作。
我看过，但由于某些原因，使用wait或waitForElement并不适用。
App.js
import React, { useState } from "react";
const options = {
First: "First",
Second: "Second"
};
function App() {
const [action,
浏览 1提问于2019-02-16得票数 0
回答已采纳
我有一个反应应用程序使用Formik和资料-ui。我抓取了submit按钮html元素，但是fireEvent没有工作。我认为问题来自Formik库层。“按钮”组件是一个可重用的材料ui按钮。“更改fireEvent”测试已通过。
但我收到了“预期的模拟函数被调用一次，但它被称为零次”。“提交fireEvent”消息。
loginForm.test.js
import { Router, MemoryRouter } from 'react-router-dom';
import { queryByAttribute } from 'react-testing-libr
浏览 1提问于2019-07-29得票数 1
回答已采纳
我有一个React组件，它生成一个按钮，其内容包含一个<span>元素，如下所示：
function Click(props) {
return (
<button disable={props.disable}>
<span>Click me</span>
</button>
);
}
我想用react-testing-library和mocha + chai来测试这个组件的逻辑。
目前我遇到的问题是，getByText("Click me")选
浏览 0提问于2019-06-14得票数 95
回答已采纳
不幸的是，我的一个测试揭示了我对如何使用react-testing-library测试这个React web应用程序的一些严重误解。测试： const setup = () => {
const utils = render(<UnderConstruction />)
const input = utils.getByLabelText('Email')
return {
input,
...utils,
}
}
test('It should set the email input
浏览 23提问于2020-07-07得票数 0
我使用cypress和react-test库来对我的组件执行单元测试。但是，在执行测试时，我遇到了下面的错误 “超过'4000ms‘的Cypress命令超时。” 我注意到我编写的实际测试是成功的。但是在以某种方式插入的“毕竟”钩子中有一个错误。我的测试规范中没有“毕竟”钩子。我想知道可以从哪里调用它，因为我的代码中没有它。 附加信息:我使用的是在plugins/index.js文件中添加的webpack和伊斯坦布尔插件 test-spec.js import React from 'react';
import {render, fireEvent, cleanup}
浏览 88提问于2019-09-24得票数 4
回答已采纳
当我尝试测试、替换或推送时，我要么得到表示历史的空对象，要么当我使用mock时，它永远不会被调用。目前我得到的信息是:无法窥探replace属性，因为它不是一个函数；未定义的给定，或者当我使用mock时，它不会被调用。 const submitHandler = async e => {
e.preventDefault();
const apiUrl = 'http://localhost:8080/auth/signup'
const signupData = {
email,
password,
ma
浏览 50提问于2019-03-31得票数 3
在调用fireEvent.focus()之后，我在拍摄快照时遇到了问题。 下面是测试结果。我这里有两个测试，一个测试在聚焦输入之前比较快照，另一个测试比较聚焦输入之后的快照。 describe("Unit: <OutlinedInput />", (): void => {
describe("Initial render", (): void => {
describe("renders as snapshot", (): void => {
it("for standard f
浏览 24提问于2019-05-07得票数 1
我已经编写了一个jest测试来覆盖被调用的onBlur事件。我正在使用react-testing-library和material-ui。 下面是测试代码： test('fires onBlur handler', async () => {
const spy = jest.fn()
const { getByPlaceholderText } = render(
<FormEmailAsync placeholder={'Your Email'} onBlurred={data => spy(data)} />
浏览 6提问于2019-09-06得票数 0
回答已采纳
我正在使用jest测试来测试我的React项目，该项目是用Create React App创建的#typescript编写的。我使用的是react-testing-library。我有一个表单组件，如果表单是空提交的，它会显示一个alert。我想(也许)通过监视/模拟window.alert来测试这个特性，但它不起作用。 我试着按照许多答案中的建议使用jest.fn()，但也不起作用。 window.alert = jest.fn();
expect(window.alert).toHaveBeenCalledTimes(1); 下面是我如何实现它的: Form.tsx async hand
浏览 41提问于2019-05-01得票数 2
10回答
如何用反应测试库测试锚的href
、、、、
我在试着测试我的锚标。一旦我点击它，我想看看window.location.href是否是我所期望的。
我尝试呈现锚，单击它，然后测试window.location.href
test('should navigate to ... when link is clicked', () => {
const { getByText } = render(<a href="https://test.com">Click Me</a>);
const link = getByText('Click Me');
浏览 0提问于2019-09-06得票数 99
回答已采纳
2回答
开玩笑模拟反应上下文
、、、、
我需要一些帮助，了解如何使用React Context测试应用程序。
这是我的样本设置。
context.js
import React from 'react'
export const AppContext = React.createContext()
App.js
import React from 'react'
import MyComponent from './MyComponent'
import {AppContext} from './context'
const App extends React.C
浏览 0提问于2019-01-21得票数 72
回答已采纳
我正在使用react-testing-library通过自定义钩子测试我的组件。但我不能让它通过。以下是我的代码
function useInput<T>(): Return<T> {
const [input, setInput] = useState<T>({} as T);
const [isDirty, setDirty] = useState({} as Record<keyof T, boolean>);
const handleInputChange = (e: ChangeEvent<HTMLInp
浏览 0提问于2020-02-17得票数 0
2回答
我正在使用React Testing Library。每当我尝试将一个类导入到测试文件中时，它都会给出一个错误，声明： No overload matches this call.
Overload 1 of 2, '(props: Readonly<RouteComponentProps<{}, StaticContext, PoorMansUnknown> & { onSave: (post: { fullName: string; title: string; body: string; createdAt: string; updatedAt:
浏览 83提问于2020-01-29得票数 0
回答已采纳
我开始使用Jest & react-testing-library创建单元测试，我不确定为什么会失败：
Component:
const CheckboxInput: React.FC<Props> = ({ id, color, height, width, border, isChecked, handleChange
}) => {
return(
<input aria-label="checkbox-input" type="checkbox" checked={isCh
浏览 0提问于2021-06-02得票数 0
我正在使用带有onClose属性的react- testing -library测试react Material UI菜单组件，该属性在菜单失去焦点时触发。我不能触发这种状态，即使我在菜单之外的组件上添加了一个单击，或者在输入元素之外添加了一个焦点。 const UserMenu: React.FunctionComponent<UserMenuProps> = ({ className }) => {
const signedIn = useAuthState(selectors => selectors.SignedIn);
const username
浏览 32提问于2019-03-07得票数 3
我尝试使用react- test -library测试以下组件： const PasswordIconButton = ({
stateString
}) => {
const { state, dispatch } = useContext(Store);
const showPassword = getObjectValue(stateString, state);
const toggleShowPassword = event => {
event.preventDefault();
dispatch(toggleBoolean(state
浏览 24提问于2019-05-05得票数 0
根据我在Dom测试库文档、和中看到的内容，我尝试测试的输入上有一个处理程序。
我的代码的一个不同之处在于，我使用的不是本地状态来控制输入值，而是使用道具。因此，onChange函数实际上是调用另一个函数(也是通过道具接收的)，它将“提升”到另一个组件的状态更新。最终，输入的值被组件作为支柱接收，并且输入值被更新。
我正在嘲弄道具，并试图做一些简单的测试，以证明onChange处理程序正在按预期的方式工作。
我希望在更改处理程序中调用的函数被调用的次数与在测试中使用fireEvent.change的次数相同，这适用于：
const { input } = setup();
fireEvent.c
浏览 1提问于2019-02-01得票数 2
回答已采纳
1回答
我正在我的应用程序中使用来自ckeditor4-react的一个ckeditor4-react组件。我想要创建一个jest测试，它将使用react-testing-library在这个CKEditor组件中编写一些东西。
目前，我的组件包含如下代码：
const handleChange = (event: any) => {
setBody(event.editor.getData());
};
<CKEditor
onChange={handleChange}
data-testid="ckeditor-textfield"
/>
这在手
浏览 3提问于2022-05-27得票数 3
回答已采纳
我正在用Jest和进行测试，这是一个调用异步函数的组件。当我运行测试时，我得到了错误ReferenceError: waitForElement is not defined
在之后，我尝试过：
在.babelrc中不使用.babelrc选项，包括位于app.test.jsx文件顶部的@babel/polyfill，在webpack.config.js的entry数组中不使用@babel/polyfill。我从测试运行中获得了错误ReferenceError: waitForElement is not defined，但是应用程序成功地编译了
使用useBuiltIns: '
浏览 1提问于2019-04-11得票数 8
回答已采纳
我发现很难使用react测试库，也很难理解我需要使用的查询，以便选择我需要测试的组件。当DOM与material、ui和formik等框架一起变得越来越冗长时，查询就过于简单了。 我已经创建了一个代码沙箱来说明这个问题。您可以在那里检查失败的测试。 https://codesandbox.io/embed/px277lj1x 我得到的问题是，查询getLabelTextBy()没有返回组件。它看起来像是说唱的label by或for属性不是由material ui呈现的。不确定如何修复此错误。 下面的代码也供参考。 //Subject under test
import React fro
浏览 20提问于2019-03-25得票数 1
我很难理解toHaveFocus()到底是如何工作的。这是我的装置：
MyComponent.js
import React from 'react'
import styled from 'styled-components'
import TextArea from './TextArea'
const Container = styled.div`
flex: 1;
height: 100%;
padding: ${props => props.theme.size};
`
const Title = styled
浏览 0提问于2018-08-14得票数 1
回答已采纳
我正在学习使用react-testing-library，我有两个调用render的测试，但问题是第二个测试失败了，无论我的测试顺序是什么。
describe('...', () => {
test('Renders form', () => {
const { queryByTestId } = render(<ThemeProvider theme={themeRed}>{comp}</ThemeProvider>)
expect(queryByTestId('address-form'
浏览 29提问于2020-02-04得票数 4
回答已采纳
我正在尝试使用反应测试库，看看我们是否应该在我们的项目中使用它。我们使用jasmine而不是jest。我想知道jasmine是否可以很容易地使用react-testing-library (应该没问题……)
我看到的大多数示例都是使用jest。在jasmine中使用react-testing-library有什么注意事项吗？有没有一些例子？
谢谢
浏览 3提问于2019-02-13得票数 1
我正在尝试为我的简单React编写测试，该应用程序使用API等为养狗所创建一个UI。
npm install jest-dom react-testing-library --save-dev
但是，我得到了以红色下划线的toBeInTheDocument()；方法和错误消息
"Property 'toBeInTheDocument' does not exist on type 'Matchers<any>'."
import "react-testing-library/cleanup-after-each";
i
浏览 0提问于2019-09-09得票数 91
回答已采纳
我正在尝试使用jest和react-testing-library测试我的LoginForm组件。成功提交登录表单后，我的handleLoginSuccess函数将在localStorage上设置' user‘项，并使用history.push()将用户导航回主页。这在开发环境中的浏览器中有效，但当我使用Jest呈现组件并模拟应用程序接口时，localStorage会更新，但导航到'/‘不会发生。
在调用history.push()之前，我尝试过设置localStorage。我不确定在这种情况下是什么负责重新渲染，以及为什么它在dev中工作而不是在test中工作。
Login.
浏览 24提问于2019-08-03得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
