时间戳

首页 > 解决方案 > 如何使用 Jest 和 Enzyme 在 useEffect 中测试 axios 获取请求？

reactjs - 如何使用 Jest 和 Enzyme 在 useEffect 中测试 axios 获取请求？

问题描述

我正在使用 axois-mock-adapter、jest 和酶测试我的 axios 获取请求。运行测试时，我的控制台出现 404 错误。一旦我将 axios 调用放在 useEffect 中，它就开始发生了。

关于我可能做错了什么的任何建议？提前致谢

应用程序.js

function App() {
    const [keyword, setKeyword] = useState("")
    const [searchResults, setSearchResults] = useState([])

    useEffect(() => {
        getDataService(keyword)
        .then(({ data }) => {
            setSearchResults(data.suggestions)
        })
        .catch(err => console.log(err))
    }, [keyword])

    return (
        <div className="App">
            <form className="container">
                <InputField keyword={keyword} setKeyword={setKeyword} />
                <SearchResults keyword={keyword} searchResults={searchResults} />
            </form>
        </div>
    );
}

应用程序.test.js

    let mock = new MockAdapter(axios);
    let wrapper;

    describe('App component', () => {
        beforeEach(() => {
         wrapper = mount(<App />)
        });
      it("should get results from api service based on keyword", async () => {
          mock.onGet('search?q=', { params: { keyword: 'shirt'}}).reply(200, {
            data: [{ searchterm: "blue shirt", nrResults: 1000 }]
          });
          axios
            .get("/search?q=", { params: { searchText: "shirt" } })
            .then(response => {
              expect(response).toEqual([{ searchterm: "blue shirt", nrResults: 1000 }]);
              done();
            }).catch((err) => console.log(err))
       })
    })

错误：错误：请求失败，状态码为 404

标签： reactjsjestjsaxiosenzymeaxios-mock-adapter

解决方案

如果测试通过并且您只想抑制这些警告（我不知道为什么会弹出这些警告axios-mock-adapter），您可以这样做：

前

const error = console.error;
console.error = jest.fn();

后

console.error = error;

推荐阅读