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

Question

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

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

App.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>
    );
}

App.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

Answer 1

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

之前

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

之后

console.error = error;