javascript - 如何使用 useEffect 钩子和异步调用编写 React 组件单元测试?
问题描述
我从一个基本的 create-react-app 应用程序开始,并尝试学习正确的单元测试技术。我更新了初始 App 组件以调用本地节点 API 以获取基本字符串响应。我似乎无法在文档中找到关于如何测试段落标记是否是我的测试中的模拟响应的文档。
发生的事情是该组件只是停留在最初的“Hello World!”上。来自状态消息的文本,而不是使用模拟的响应消息进行更新。我确定我必须触发更新或完成各种摘要循环,但我还不确定如何做到这一点。
应用程序.js
import React from "react";
import axios from "axios";
import "./App.css";
const App = () => {
const [message, setMessage] = React.useState("Hello World!");
React.useEffect(() => {
const getGreetingFromApi = async () => {
const apiResponseGreeting = await axios.get("api/hello");
setMessage(apiResponseGreeting.data);
};
getGreetingFromApi();
});
return (
<div className="App">
<header className="App-header">
<p>{message}</p>
</header>
</div>
);
};
export default App;
应用程序.test.js
import React from "react";
import ReactDOM from "react-dom";
import { act } from "react-dom/test-utils";
import axios from "axios";
import App from "./App";
jest.mock("axios");
describe("App Component Tests", () => {
let container;
beforeEach(() => {
container = document.createElement("div");
document.body.appendChild(container);
});
afterEach(() => {
document.body.removeChild(container);
container = null;
});
it("App replaces initial value with greeting response", async () => {
const mockResponse = { data: "Label Test Text" };
axios.get.mockResolvedValue(mockResponse);
let paragraph;
act(() => {
ReactDOM.render(<App />, container);
paragraph = container.querySelector("p");
});
expect(paragraph.textContent).toEqual(mockResponse.data);
});
});
解决方案
谢谢@diedu 的评论。这为我指明了正确的方向。这是最终的工作测试:
it("App replaces initial value with greeting response", async () => {
const mockResponse = { data: "Label Test Text" };
axios.get.mockResolvedValue(mockResponse);
let paragraph;
await act(async () => {
await ReactDOM.render(<App />, container);
paragraph = container.querySelector("p");
});
expect(paragraph.textContent).toEqual(mockResponse.data);
});
推荐阅读
- python - 如何制作逻辑回归(梯度下降)代码?
- c# - Webview 没有 setDownloadListener()?
- python - 对象位于 0x03885A90> API 请求
- javascript - 为什么“函数类型”可以应用于“{}类型”
- c# - System.TypeInitializationException:
- firebase - 如何在 Firebase 分析中跟踪 Flutter 屏幕?
- maven - 将 Bitbucket 存储库用于存储库
- linux - 尝试查看我的手册页时出现“[文件名] 没有手动输入”错误
- java - 如何在jdbc appender的log4j2.properties文件中将日期时间作为长值传递
- java - 当 kotlin 从 android studio 中的不同模块调用抽象 java 代码的子类时发生 IllegalAccessError