我有一个 Jest 单元测试,测试了一个模拟的 API 调用错误,以确保错误消息显示在页面上。在我的实际文件中,我使用 notistack
来显示错误消息。由于我认为不相关,所以我没有显示完整的 API 请求,简要说明如下:
myComponent.js:
import { useSnackbar } from 'notistack';
const myComponent = props => {
const { enqueueSnackbar } = useSnackbar()
//make an API call to an endpoint
...
if (response.ok) enqueueSnackbar("API Success", { variant: "success" });
else enqueueSnackbar("API Failed", { variant: "error" });
}
由于这个原因,我正在我的单元测试中对上述内容进行测试。再次说明,我不会粘贴整个单元测试,因为我认为这并不相关,但类似于以下内容: myComponent.test.js
import { render, screen } from "@testing-library/react"
test("testing error message on API call", async () => {
// mock the API call to return a 500 <- this works fine
render(<myComponent />)
// ensure that the error message is displayed in the screen
expect(screen.queryByText(/API Failed/)).toBeInTheDocument();
});
上述操作会报错:
TypeError:无法对`(0 , _notistack.useSnackbar)(...)的` 'enqueueSnackbar' 进行析构,因为它未定义
如果只是简单地添加以下内容,enqueueSnackbar()
将被定义,但测试仍然会失败,因为消息为null
.
const mockEnqueue = jest.fn();
jest.mock('notistack', () => ({
...jest.requireActual('notistack'),
useSnackbar: () => {
return {
enqueueSnackbar: mockEnqueue
};
}
}));
然而,我甚至不想嘲笑 snackbar,因为我想测试每种具体情况下实际显示的消息(有多种情况)。