如何模拟组件方法？
模拟组件方法是指在开发过程中，为了测试或模拟特定的组件行为而创建一个虚拟的组件方法。这样可以在不依赖实际组件的情况下进行测试、调试或模拟特定场景。
在前端开发中，可以使用各种测试框架和工具来模拟组件方法。以下是一种常见的方法：
- 使用 Jest 测试框架：Jest 是一个流行的 JavaScript 测试框架，它提供了一套强大的工具和 API 来模拟组件方法。可以使用 Jest 提供的
jest.fn()方法创建一个模拟函数，然后将其作为组件方法的替代品。 - 使用 Jest 测试框架：Jest 是一个流行的 JavaScript 测试框架，它提供了一套强大的工具和 API 来模拟组件方法。可以使用 Jest 提供的
jest.fn()方法创建一个模拟函数，然后将其作为组件方法的替代品。 - 使用 Sinon.js 库：Sinon.js 是一个独立的 JavaScript 测试工具库，它提供了丰富的功能来模拟和监视函数的行为。可以使用 Sinon.js 提供的
sinon.stub()方法创建一个模拟函数，并将其替代组件方法。 - 使用 Sinon.js 库：Sinon.js 是一个独立的 JavaScript 测试工具库，它提供了丰富的功能来模拟和监视函数的行为。可以使用 Sinon.js 提供的
sinon.stub()方法创建一个模拟函数，并将其替代组件方法。 - 使用 React Testing Library：React Testing Library 是一个用于测试 React 组件的工具库，它提供了一套简单而强大的 API 来测试组件的行为。可以使用 React Testing Library 提供的
render()和fireEvent方法来渲染组件和触发事件。 - 使用 React Testing Library：React Testing Library 是一个用于测试 React 组件的工具库，它提供了一套简单而强大的 API 来测试组件的行为。可以使用 React Testing Library 提供的
render()和fireEvent方法来渲染组件和触发事件。
以上是一些常见的方法来模拟组件方法。根据具体的开发环境和需求，可以选择适合的测试框架或工具来进行组件方法的模拟。
相关·内容
1回答
如何模拟Firebase Auth方法？(React，测试库)
reactjs、firebase、jestjs、mocking、react-testing-library
我有以下内容：
import React from "react";
import Firebase from "../../Firebase";
const SignOutButton = () => (
<button type="button" onClick={() => Firebase.auth().signOut()}>
Sign Out
</button>
);
export default SignOutButton;
我想测试一下Firebase.auth().signO
浏览 2提问于2019-10-25得票数 3
1回答
如何检查Jest在这个测试中是否调用了signOut？
reactjs、typescript、jestjs
我正在尝试在下一个应用程序中测试我的主页，但是我在home中有一个按钮，可以调用一个注销防火墙功能。我尝试过模拟这个函数并检查是否被调用，但没有成功。我如何才能正确地做这件事？
import { fireEvent, render, screen } from '@testing-library/react';
import Home from '../../pages/index';
jest.mock('firebase/app', () => {
return {
auth: () => {
retu
浏览 1提问于2021-08-11得票数 0
1回答
Jest:测试函数组件中的useNavigate钩子
reactjs、react-hooks、jestjs、react-router-dom
我正在用Jest编写测试，并希望测试一个简单的按钮，它可以作为注销，并通过onClick将您重定向到onClick。
import {loginService} from "../../utils/loginService";
import React from "react";
import {useNavigate} from "react-router-dom";
const Logout = () => {
const navigate = useNavigate()
const logout = e =>
浏览 5提问于2022-05-15得票数 2
回答已采纳
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
回答已采纳
1回答
测试反应形式内部提交
reactjs、unit-testing、user-interface、testing、react-testing-library
我有这样的组成部分：
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
1回答
在异步函数中没有调用模拟函数
javascript、reactjs、unit-testing、async-await、jestjs
我打破了一些测试，不知道为什么。
我需要将一些现有代码放在异步条件检查之后。我现有的测试声称调用了一个通过道具传递的模拟函数，但是现在这个函数在异步代码/条件之后。我用一个条件检查间谍更新了测试，这样执行就可以像往常一样继续执行了，但是模拟函数失败了，它被调用了。为了进一步增加混乱，当我逐步完成测试和代码时，预期的模拟函数就会存在，并且似乎会被调用。下面是我的代码的前后近似，注释指出哪些断言通过/失败。在我的实际代码库中，我在多个地方添加了这样的条件:这些组件正在使用其他框架进行测试，这些框架不包括在近似框架中，包括酶/挂载&react test-renderer，但出于同样的原因仍然
浏览 4提问于2022-08-04得票数 1
回答已采纳
1回答
模仿useHistory并期待toBeCalledWith
reactjs、jestjs、react-hooks、react-testing-library
我不想检查在我的测试中是否使用正确的参数调用了history.push()。我不确定模拟useHistory()的正确方式是什么 我尝试过this解决方案。但是似乎我不能检查是否调用了push()。 App.tsx import React from 'react';
import {useHistory} from 'react-router-dom';
const App: React.FC = () => {
const history = useHistory();
const onClick = () => {
浏览 26提问于2020-01-24得票数 1
回答已采纳
3回答
如何在redux工具箱中模拟存储
reactjs、redux、react-testing-library
import React from 'react';
import { Provider } from 'react-redux';
import configureStore from 'redux-mock-store';
import { render, screen, fireEvent } from '@testing-library/react';
import MyApp from './MyApp ';
const initialState = {};
const mockStore = conf
浏览 0提问于2020-11-20得票数 9
1回答
RTL测试按钮onClick支柱
reactjs、jestjs、react-testing-library
我正在跟踪RTL文档，并希望测试我的按钮组件。我似乎无法通过onclick考试。我已经模拟了onClick函数，但是我得到了下面的错误。
expect(jest.fn()).toHaveBeenCalledTimes(expected)
Expected number of calls: 1
Received number of calls: 0
import React from 'react'
import { render, screen, fireEvent } from '@testing-library/react'
import '@t
浏览 9提问于2022-11-26得票数 0
回答已采纳
1回答
如何在react测试库中使用jest.spyOn
reactjs、enzyme、react-testing-library
我正在将一个类组件重构为一个函数组件。
在我的测试文件中，我使用的是酶，但我正在迁移到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
1回答
使用fireEvent传递自定义事件属性(测试-库和jest)
javascript、events、jestjs、react-testing-library、jsdom
我想做什么
我希望在某些测试期间(使用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
回答已采纳
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
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
回答已采纳
1回答
如何使用Jest测试React路由器
javascript、reactjs、jestjs、react-router-dom、react-testing-library
我是使用jest进行测试的新手，我想测试以下代码。 import React from "react";
import "./ButtonLogin.css";
import { Link } from 'react-router-dom';
function ButtonLogin() {
return (
<Link to="/login"> <button className="button-login">Iniciar sesión</button&
浏览 98提问于2021-11-08得票数 0
回答已采纳
1回答
在react应用程序上使用jest和测试库未调用模拟函数
javascript、reactjs、jestjs、react-testing-library、react-hook-form
我正在使用jest和测试库来测试表单。但是mock函数没有被调用。最后一行expect(mockOnSubmit).toHaveBeenCalled();总是失败。 下面是我的测试代码： App.test.js import { render, fireEvent, cleanup } from "@testing-library/react";
import App from "./App";
import { act } from "react-dom/test-utils";
afterEach(cleanup);
test("
浏览 27提问于2021-10-18得票数 1
1回答
如何在Jest中嘲弄陶器
reactjs、react-hooks、jestjs、mocking
我想模仿来自的。根据我的经验，第三库可以通过遵循来模拟。
不幸的是，该方法可以应用于wouter，但仍然无法模拟useLocation。
在这里
app.jsx
import React from 'react'
import {render} from 'react-dom'
import {useLocation} from 'wouter'
export default function App() {
const [, setLocation] = useLocation()
function clickButton() {
浏览 16提问于2022-04-12得票数 -1
2回答
如何模拟或断言window.alert是否在使用typescript的React & Jest中触发？
reactjs、typescript、jestjs、react-testing-library
我正在使用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
2回答
开玩笑模拟反应上下文
reactjs、unit-testing、jestjs、react-context、react-testing-library
我需要一些帮助，了解如何使用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
回答已采纳
1回答
React & Enzyme/Jest: beforeEach()对变量进行分组，并在每个单元测试中使用之前的最佳实践？
reactjs、unit-testing、jestjs、enzyme
我正在做我的第一个react单元测试，我想知道是否有对每个单元测试中使用的变量进行分组的最佳实践？对于使用相同变量的表单，我有一组单元测试。我将它们分组到一个“describe(){}”中，并希望在每次测试开始时都有变量。我的方法如下，但我收到了一个错误，说“ReferenceError: input is not defined”。 如果我没有将它们包装在beforeEach()中，那么我会收到'screen.getByText‘行的错误信息，即’找不到包含文本的元素‘，即使它被包装在等待中也是如此。 如果我在每个测试中重复变量，那么测试运行得很好，但这将是大量重复的代码，因为我在
浏览 10提问于2020-07-19得票数 0
回答已采纳
3回答
如何使用Jest使用新的React路由器钩子模拟history.push
reactjs、react-router、jestjs、react-router-dom、react-testing-library
我正在尝试模拟react-router上新的history.push钩子中的useHistory，并使用@testing-library/react。我只是模拟了这个模块，就像这里的第一个答案：
因此，我正在做：
//NotFound.js
import * as React from 'react';
import { useHistory } from 'react-router-dom';
const RouteNotFound = () => {
const history = useHistory();
return (
&l
浏览 1提问于2019-10-23得票数 36
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
