时间戳

首页 > 解决方案 > 使用 Jest Mock API 调用 SetState

reactjs - 使用 Jest Mock API 调用 SetState

问题描述

我有一个 API 调用，它在某个组件安装时运行。如果此 API 调用成功，响应数据将用于更新我的一个 React Hooks 的状态。

我遇到的问题要么与异步性有关，要么与格式错误的模拟 API 调用有关，但无论我尝试什么，我都无法让这个测试正常工作。

这是 API 的简化版本：

const getOrg =() => {
  axios.get(URL, config)
    .then(response => response.data)
    .then(data => {
       setOrgTitle(data.name)
    }
}

基本上，API 被触发，我的setOrgTitle钩子从响应中更新。

const [orgTitle, setOrgTitle] = useState("");

现在在我的返回语句中，我显示的值是orgTitle：

<h1 className={styles.titleText} id="document-folders-h1">
  {orgTitle} Folders
</h1>

好的，所以组件非常简单。当我尝试测试事物时，我的两个想法是orgTitle在我的测试中设置初始挂钩状态或模拟 API。经过一些研究，我决定模拟 API 是要走的路。

所以我有一个mockAxios组件：

const mockAxios = {
  get: jest.fn(() => Promise.resolve({ data: {} }))
};

module.exports = mockAxios;

还有我的测试文件：

import mockAxios from "../../mockTests/DocumentFoldersMock";

it("fetches results for getAdminOrg", () => {
  axios.get.mockImplementation(() =>
    Promise.resolve({ data: { name: "GETtest" } })
  );
  const wrapper = mount(
    <AppProviders>
      <DocumentFolders />
    </AppProviders>
  );
  const orgTitle = wrapper.find("#document-folders-h1");
  expect(orgTitle.text()).toContain("GETtest Folders");
});

我正在模拟响应数据，但是我不确定如何运行在我的实际 axios 调用中调用的setOrgTitle函数。.then如何使用我的模拟响应从我的模拟 axios 调用中做到这一点？

Jest 测试的结果显示 expected("GETtest Folders") received("Folders") 所以我很确定我遇到了异步问题或调用挂钩更新的问题。

标签： reactjstestingjestjsaxiosenzyme

解决方案

推荐阅读