如何在useEffect中使用Jest和酶测试axios get请求？
在React中，可以使用Jest和Enzyme来测试axios的get请求。useEffect是React的一个钩子函数，用于处理副作用操作，比如发送网络请求。下面是在useEffect中使用Jest和Enzyme测试axios get请求的步骤：
- 首先，安装必要的依赖：
- 首先，安装必要的依赖：
- 创建一个测试文件，命名为
example.test.js，并导入所需的模块： - 创建一个测试文件，命名为
example.test.js，并导入所需的模块： - 创建一个模拟的axios实例，并设置模拟的响应数据：
- 创建一个模拟的axios实例，并设置模拟的响应数据：
- 编写测试用例，在测试用例中使用
mount函数渲染组件，并在useEffect中调用axios的get请求： - 编写测试用例，在测试用例中使用
mount函数渲染组件，并在useEffect中调用axios的get请求： - 编写ExampleComponent组件，其中包含了使用axios的get请求的逻辑：
- 编写ExampleComponent组件，其中包含了使用axios的get请求的逻辑：
- 运行测试命令，执行测试用例：
- 运行测试命令，执行测试用例：
这样，就可以在useEffect中使用Jest和Enzyme来测试axios的get请求了。注意，上述示例中的/api/data是一个示例的请求地址，你需要根据实际情况修改为你的接口地址。另外，你还可以根据需要添加更多的测试用例，覆盖不同的情况和边界条件。
相关·内容
1回答
如何实现Axios和Hooks - useEffect的Jest测试
reactjs、jestjs、axios、use-effect
如何在React中为useEffect中的Axios调用编写Jest测试？
我发现了如何在这里嘲弄Axios -
如果用户交互(如单击按钮)调用了useEffect，我还知道如何触发它。但是在下面的情况下，useEffect是由Axios的响应触发的异步函数调用的。
示例：
组件
import React, { useState, useEffect } from "react";
import axios from "axios";
const LoadImage = () => {
const [loading, setLoading] = u
浏览 3提问于2020-09-28得票数 3
回答已采纳
1回答
警告:测试内部应用程序的更新未包含在act(...)中在酶和钩子中
reactjs、jestjs、react-hooks、enzyme、act
我已经编写了这个组件。它使用钩子和状态来获取数据。获取后，加载状态将更改为false，并显示侧边栏。 我遇到了Jest和Enzyme的问题，因为它确实在我的单元测试中为Act抛出了一个警告。一旦我将动作添加到我的笑话和酶中，测试就失败了！ // @flow
import React, { useEffect, useState } from 'react';
import Sidebar from '../components/Sidebar';
import fetchData from '../apiWrappers/fetchData'
浏览 9提问于2020-08-25得票数 8
1回答
Jest和酶通过了单项测试，但未能运行所有
reactjs、jestjs、enzyme
我有几个要删除国家、州和城市的测试。当我单独运行它们时，它们都通过了，但是如果我一起运行它们，最后一次测试就失败了。它拥有上一个测试的mount(和dom)！也就是说，expect(wrapper.text().includes('1st State')).toBe(true);失败了，因为我已经从之前的测试中删除了它，快照确认了这一点！有人知道为什么吗？
更详细地说，我有一个类似下面的树结构，如果我移除这个国家，那么这个国家下的所有州和城市都会被移除，如果我移除州，那么这个州下的所有城市都会被移除，依此类推。
-1st Country(testid=1)
-- 1st Sta
浏览 0提问于2020-08-26得票数 0
1回答
calls测试所有api调用函数？
javascript、reactjs、unit-testing、jestjs
我试图通过某种方法测试我的all api调用函数，但是一直都有错误，那么测试我的all api调用库和其他函数的最好方法是什么，到目前为止我在测试中所做的。
下面是api的car函数
const api = `${api1}cars/Car
export async function getMyCar(value, to, from, year, month) {
let products = new Promise((resolve, reject) => {
fetch(
`${api}?type=${value ? value : ""}&a
浏览 3提问于2020-10-05得票数 0
1回答
如何在useEffect中使用Jest和酶测试axios get请求？
reactjs、jestjs、axios、enzyme、axios-mock-adapter
我正在使用axois-mock-adapter、jest和enzyme测试我的axios get请求。当我运行我的测试时，我在控制台中出现了404错误.当我在useEffect中发出axios调用时，它就开始发生了。 对我可能做错了什么有什么建议吗？提前感谢 App.js function App() {
const [keyword, setKeyword] = useState("")
const [searchResults, setSearchResults] = useState([])
useEffect(() => {
浏览 22提问于2020-07-24得票数 0
1回答
使用ajax请求测试react单击按钮
javascript、reactjs、react-native、testing、axios
我正在尝试测试一个简单的登录组件，在那里我想填写电子邮件和密码，并单击一个按钮让我登录。当我单击login按钮时，它会使用axios创建一个ajax post请求。所以我想测试快乐和不快乐的路径。第一个测试应该是在错误的post请求之后找到一个内部有错误的html元素。 这是我的LoginComponent简化版： import React from "react";
import axios from "axios";
import { login } from "../utils";
import {Link} from "reac
浏览 14提问于2020-01-25得票数 1
1回答
在测试呈现获取API数据的React组件时，如何在做出任何断言之前最好地等待该数据？
reactjs、jestjs、axios、react-hooks、enzyme
我有一个简单的“编辑用户”组件，它包含一个带有“名字”字段的表单。当组件第一次呈现时，该字段为空，直到用户数据的API请求完成为止。获取数据后，状态将被更新，组件将重新呈现，这一次填充了“Name”字段。(要明确的是，这种情况不需要用户交互。)
我的测试预期“名字”字段将被正确填充，但它目前正在失败，因为它只是在测试我的组件的初始呈现，然后才能获取用户信息。
有什么有效的方法来测试这种行为，即等到(模拟的)请求完成后才做出任何断言？
FWIW，我用的是16.12.0。
以下是缩写的组件：
import React, { useState, useEffect } from 'react
浏览 4提问于2020-04-16得票数 1
回答已采纳
1回答
UseEffect挂钩的Jest测试用例
reactjs、testing、jestjs、react-hooks、enzyme
我正在尝试为useEffect react钩子编写Jest-enzyme测试用例，我真的迷路了，我想为2个react钩子写测试用例，一个进行异步调用，另一个使用usestate钩子对数据进行排序和设置，我的文件在这里。
导出常量数据集: React.FC = ({id，DatasetTable，setDataset，datasetError，setDataSetError}) => { const sortedDataset，setSortedDataset = useState()；
useEffect(() => {
fetchRegistryFunction({
浏览 6提问于2019-11-25得票数 0
1回答
使用窗口调整大小事件对自定义React Hook进行单元测试
javascript、reactjs、unit-testing、enzyme
我正在尝试对一个简单的自定义钩子getWindowWidth()进行单元测试，但是我无法在酶中调整窗口的大小。
我正在使用酶挂载一个使用钩子的组件，设置窗口对象的宽度，强制重新渲染，但窗口宽度永远不会改变。
这里是钩子：
import { useState, useEffect } from 'react';
export default function getWindowWidth() {
const [width, setWidth] = useState(window.innerWidth);
useEffect(() => {
const h
浏览 12提问于2019-08-14得票数 1
1回答
如何使用jest和酶测试异步数据获取react组件？
javascript、reactjs、unit-testing、jestjs、enzyme
我有一个使用useEffect钩子的react组件，用于获取数据并相应地设置加载、成功和失败状态。 import React, { useState, useEffect } from "react";
import { fetchData } from "./api";
function App({ id }) {
const [data, setData] = useState(null);
const [isFetching, setIsFetching] = useState(false);
const [error, setError]
浏览 17提问于2020-01-04得票数 3
3回答
使用Jest模拟AJAX请求以作出反应
reactjs、jestjs
我正在构建一个React组件，在挂载时，它通过AJAX从服务器获取数据。
我正在尝试(失败)在Jest中模拟AJAX调用，我想知道我是否只是误解了在Jest中的嘲笑是如何工作的？
我的文件结构是：
index.jsindex.test.jsrequests.js__mocks__ requests.js
组件(index.js)通过requests.js进行调用，后者使用Axios从服务器获取数据。requests.js在__mocks__文件夹中被模拟。
如下所示，在测试文件index.test.js中，我使用getSpy来检测是否调用了requests.getData函数。从来都不是。
浏览 8提问于2019-10-14得票数 3
1回答
当状态随REST调用发生变化时，测试响应组件
reactjs、unit-testing、react-hooks、jestjs、enzyme
当基于多个REST调用响应更新状态时，我希望测试我的react组件。
这是我的密码。
setuptests.js
import Enzyme from 'enzyme';
import EnzymeAdapter from '@wojtekmaj/enzyme-adapter-react-17';
Enzyme.configure({ adapter: new EnzymeAdapter() });
apiProvider.js：
const BASE_URL = "https://jsonplaceholder.typicode.com";
浏览 9提问于2022-07-22得票数 0
回答已采纳
1回答
如何用jest和酶正确测试反应的功能成分？
reactjs、unit-testing、jestjs、enzyme
my-component.js
import axios from "axios";
import React from "react";
const UnitTest = () => {
const [todo, set_todo] = React.useState({});
React.useState(() => {
const onMounted = async () => {
const getTodo = await axios.get("https://jsonplaceholder.typ
浏览 5提问于2021-06-08得票数 2
回答已采纳
1回答
测试函数是否已被调用- React，
reactjs、unit-testing、axios、react-hooks、enzyme
我正在尝试测试一个简单的组件。 在我的组件中，我使用useEffect调用fetchPdf函数。 在fetchPdf函数中，我发出axios请求，如果调用成功，我会将响应(即pdf)设置为状态。 我的组件： import React, { useState, useEffect } from "react";
import axios from 'axios';
export default function App() {
const [pdf, setPdf] = useState();
const fetchPdf = () => {
浏览 17提问于2020-12-16得票数 0
1回答
如何使用Jest酶测试钩子和PubSub-js的反应
reactjs、jestjs、react-hooks、enzyme、publish-subscribe
你好，我有一个简单的应用程序，连接到一个主题，然后更新他的状态，似乎是工作时，发挥作用，但我有一个问题，如何正确地为它编写测试有一个库，我使用
import React, { useState, useEffect } from 'react'
import PubSub from 'pubsub-js'
const App = () => {
const [data, setData] = useState([])
const mySub = (msg, pubData) => {
setData(pubData)
}
useE
浏览 3提问于2021-05-07得票数 0
1回答
如何在componentDidMount中测试异步调用创建的组件？
javascript、unit-testing、reactjs、jestjs、enzyme
我从组件的componentDidMount函数向我的API http://localhost:3001/api/cards发出GET请求，以便只有在第一次呈现组件之后才会发出该请求(如react官方指南所建议的那样)。
设置数组data的状态。在render函数中，我调用data.map函数来呈现此数组中的多个组件。我应该如何测试是否渲染了所需数量的组件？
我的组件：
//CardGrid.js
import React from 'react';
import { Card, Col, Row } from 'antd';
import 'antd
浏览 13提问于2017-01-07得票数 5
回答已采纳
1回答
在React中使用useState()和useEffect()时设置来自axios的状态值
javascript、reactjs、axios、react-testing-library
当我运行这个测试时，正确地模拟了axios调用，但是setParticipant()从不设置participant变量的值。我猜是因为它是异步的。在测试中断言之前，如何“等待”setParticipant()调用完成？ participant.tsx import React, { useEffect, useState } from 'react';
import axios from 'axios';
function EditParticipant(props) {
const [participant, setParticipant] = use
浏览 53提问于2020-12-09得票数 0
1回答
对于基本jest测试，接收`globalObj.setTimeout不是函数错误
javascript、reactjs、react-native、axios、react-hooks-testing-library
我正在尝试测试一个基本的Axios钩子，并接收到： TypeError: globalObj.setTimeout is not a function
at setImmediatePolyfill (node_modules/@testing-library/react-native/build/helpers/timers.js:59:20)
at Object.then (node_modules/@testing-library/react-native/build/flushMicroTasks.js:26:32) 据我所知，预期的正在通过，但由于某些原因
浏览 11提问于2021-11-18得票数 2
回答已采纳
1回答
登录，特别是使用Jest和酶的react组件
javascript、reactjs、jestjs、enzyme
我必须为这个组件编写测试用例，如下所示：
import React from 'react';
import auth from 'containers/Login/authService';
class Footer extends React.Component {
render() {
if(!auth.loggedIn()){
return (
<div className="hidden">Not Logged In</div>
);
浏览 0提问于2018-11-09得票数 1
回答已采纳
1回答
访问组件道具，这些道具是从有React的HOC - Jest返回的。
javascript、reactjs、jestjs、enzyme、higher-order-components
我正在尝试为我的hoc编写测试用例，我调用了另一个hoc。代码看起来像：
getData.jsx
import React, { useState, useEffect } from 'react';
import { connect } from 'react-redux';
export default function getData(Receiver) {
function fetchData(props) {
const [dataInState, setData] = useState([]);
useE
浏览 0提问于2019-09-16得票数 2
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
活动推荐
腾讯云开发者
