Question

我有一个API调用，只要安装了某个组件，该调用就会运行。如果此API调用成功，则响应数据将用于更新我的React Hook之一的状态。

我遇到的问题要么与异步性有关，要么与格式不正确的模拟API调用有关，但是无论如何尝试，我都无法使此测试正常工作。

这是API的简化版本：

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

基本上会触发API，并从响应中更新我的setOrgTitle挂钩。

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

现在在我的return语句中，我显示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测试的结果说是预期的（“ GETtest文件夹”）已收到（“文件夹”），所以我很确定自己是异步问题还是调用挂钩更新的问题。

使用Jest Mock API调用SetState

0 个答案: