我目前正在用Typescript编写一个React组件，该组件利用了一个称为useAxios的axios-hooks钩子。这个钩子在使用中的一个例子是在这里：
export const App = () => {
const [{ data, loading, error }, refetch] = useAxios(
"https://api.myjson.com/bins/820fc"
);
if (loading) return <p>Loading...</p>;
if (error) return <p>Error!</p>;
return (
<div>
<button onClick={e => refetch()}>refetch</button>
<pre>{JSON.stringify(data, null, 2)}</pre>
</div>
);
};
const rootElement = document.getElementById("root");
render(<App />, rootElement);
我试图弄清楚如何编写一个可以模拟useAxios挂钩的测试。我尝试创建基础axios组件的模拟，但是无法正常工作：
import React from "react"
import { render } from "@testing-library/react"
import { Test } from "../test"
import useAxios from "axios-hooks"
jest.mock("axios-hooks")
const mockedAxios = useAxios as jest.Mocked<typeof useAxios>
it("Displays loading", () => {
// How to mock the return values in the following line?
// mockedAxios.
const { getByText } = render(<Test />)
expect(getByText("Loading...")).toBeDefined()
})
我知道我不必模拟axios这是底层的依赖关系，我应该能够模拟useAxios，但是我还是会尝试的。
我意识到这个问题已在SO上被多次提及，但我可以找到针对此特定用例的解决方案。
任何帮助，不胜感激！
我自己想办法。为了测试自定义钩子，我执行了以下操作：
import * as useAxios from "axios-hooks"
jest.mock("axios-hooks")
const mockedAxios = useAxios as jest.Mocked<typeof useAxios>
it("Displays loading message", async () => {
// Explicitly define what should be returned
mockedAxios.default.mockImplementation(() => [
{
data: [],
loading: true,
error: undefined
},
() => undefined
])
const { getByText } = render(<Test />)
expect(getByText("Loading...")).toBeDefined()
})
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句