如何解决如何测试调用api的函数?
如何测试调用 get API 并输出响应的函数。 我试过了,但我能够测试处于 state 的初始数据,但我想知道如何测试在调用 API 时更新初始状态的函数。
代码示例我尝试过的内容。 代码沙盒链接:[testing code]1
上下文 API
这里我调用了函数userDataFunc,它在上下文中,初始数据存储在状态userData
import React,{ Component,createContext } from "react";
import axios from "axios";
export const globalC = createContext();
export class Gprov extends Component {
state = {
userData: []
};
componentDidMount() {}
userDataFunc = async () => {
await axios(`https://jsonplaceholder.typicode.com/users`)
.then((res) => {
if (res.status === 200) {
this.setState({
userData: res.data
});
}
})
.catch((err) =>
this.setState({
userDataerror: err
})
);
};
render() {
return (
<globalC.Provider
value={{
...this.state,userDataFunc: this.userDataFunc
}}
>
{this.props.children}
</globalC.Provider>
);
}
}
上下文测试文件
在这里,我执行了一些测试,例如通过测试用例的初始状态值,但我无法测试该功能,任何人都可以帮助我。
import React from "react";
import { Gprov } from "./context";
import { create } from "react-test-renderer";
import { waitForElement,cleanup } from "@testing-library/react";
import axiosMock from "axios";
afterEach(cleanup)
describe("Context Page",async () => {
const component = create(<Gprov />);
const instance = component.getInstance();
it("it updates dose correctly",() => {
console.log("instance",instance);
expect(instance.state.userData).toStrictEqual([]);
});
it("fetches data and display",async () => {});
});
解决方法
我认为您应该通过使用它的组件上显示的内容来测试 API 调用。例如Dashboard
。
这是我为 Dashboard
编写的测试:
import React from "react";
import Dashboard from "./Dashboard";
import { Gprov } from "./context";
import { render,waitFor } from "@testing-library/react";
import axios from "axios";
import "@testing-library/jest-dom/extend-expect";
jest.mock("axios");
afterEach(() => {
jest.clearAllMocks();
});
it("displays user name in dashboard",async () => {
axios.mockResolvedValue({ data: { id: 1,name: "John" },status: 200 });
const { getByText } = render(
<Gprov>
<Dashboard />
</Gprov>
);
await waitFor(() => expect(getByText("John")).toBeInTheDocument());
});
我让它通过了我用 create-react-app
创建的新项目,并稍微修改了你的 Gprov
和 Dashboard
组件,代码如下:
export class Gprov extends Component {
state = {
userData: [],};
componentDidMount() {}
userDataFunc = async () => {
await axios(`https://jsonplaceholder.typicode.com/users`)
.then((res) => {
if (res.status === 200) {
this.setState({
userData: [...this.state.userData,res.data],});
}
})
.catch((err) => {
this.setState({
userDataerror: err,});
});
};
render() {
return (
<globalC.Provider
value={{
...this.state,userDataFunc: this.userDataFunc,}}
>
{this.props.children}
</globalC.Provider>
);
}
}
export default function Dashboard() {
const { userDataFunc,userData } = useContext(globalC);
useEffect(() => {
userDataFunc();
},[]);
return (
<div
style={{ height: "100vh",backgroundColor: "#ea2345" }}
className="d-flex justify-content-center align-items-center"
>
<div
style={{
overflowY: "auto",margin: "4px",border: "2px solid",padding: "12px",height: "80vh",}}
>
{userData &&
userData.map((i) => {
return (
<h5 key={i.id} style={{ color: "#fff" }}>
{i.name}
</h5>
);
})}
</div>
</div>
);
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。