如何测试公理的成功和失败案例?

Question

我有一个 React 应用程序。我正在使用 React-testing-library 进行测试。我正在尝试编写测试用例来覆盖我的 axios 失败案例，但无法做到。

为了测试，我创建了一个名为src/__mocks__的文件夹，其中包含一个名为"axios.js"的文件。里面的内容是——

export default {
get: jest.fn(() => Promise.resolve({ data: "success" }))
};

在我的 component.test.js 测试文件中，我能够测试 axios 调用的成功场景。但不确定如何测试失败案例。内容是——

it("Test axios call", () => {
axiosMock.get.mockResolvedValueOnce({
data: { greeting: "hello there" }
});
});

注意 - 我的组件内的 axios 调用在

useEffect(()=>{
axios.get('url')
.then((res)=>{console.log(res)})
.catch((err)=>{console.log(err)});
},[])

还要注意，我能够通过在 axios 模拟中将 Promise.resolve 更改为 Promise.reject 来测试失败案例。但是，在任何时候，我都可以测试其中之一，而不是两者兼而有之！

Answer 1

这是一个用 TypeScript 编写的解决方案。

要将其转换为 JavaScript，请将(axios as jest.Mocked<typeof axios>)替换为axios，并将任何对ts的引用更改为js。

index.ts：

import axios from 'axios';
function main() {
return axios
.get('url')
.then(res => {
console.log(res);
})
.catch(err => {
console.log(err);
});
}
export { main };

单元测试：

import axios from 'axios';
import { main } from './';
describe('main', () => {
it('success', async () => {
const spyOn = jest.spyOn(console, 'log');
(axios as jest.Mocked<typeof axios>).get.mockResolvedValueOnce('success data');
await main();
expect(spyOn).toBeCalledWith('success data');
spyOn.mockRestore();
});
it('error', async () => {
const spyOn = jest.spyOn(console, 'log');
(axios as jest.Mocked<typeof axios>).get.mockRejectedValueOnce(new Error('some error'));
await main();
expect(spyOn).toBeCalledWith(new Error('some error'));
spyOn.mockRestore();
});
});

__mocks__/axios.ts：

const axiosMocked = {
get: jest.fn()
};
export default axiosMocked;

单元测试结果：

PASS  src/stackoverflow/57835066/index.spec.ts
main
✓ success (12ms)
✓ error (4ms)
console.log node_modules/jest-mock/build/index.js:860
success data
console.log node_modules/jest-mock/build/index.js:860
Error: some error
at Object.<anonymous> (/Users/elsa/workspace/github.com/mrdulin/jest-codelab/src/stackoverflow/57835066/index.spec.ts:15:68)
at step (/Users/elsa/workspace/github.com/mrdulin/jest-codelab/src/stackoverflow/57835066/index.spec.ts:32:23)
at Object.next (/Users/elsa/workspace/github.com/mrdulin/jest-codelab/src/stackoverflow/57835066/index.spec.ts:13:53)
at /Users/elsa/workspace/github.com/mrdulin/jest-codelab/src/stackoverflow/57835066/index.spec.ts:7:71
at new Promise (<anonymous>)
at Object.<anonymous>.__awaiter (/Users/elsa/workspace/github.com/mrdulin/jest-codelab/src/stackoverflow/57835066/index.spec.ts:3:12)
at Object.<anonymous> (/Users/elsa/workspace/github.com/mrdulin/jest-codelab/src/stackoverflow/57835066/index.spec.ts:13:15)
at Object.asyncJestTest (/Users/elsa/workspace/github.com/mrdulin/jest-codelab/node_modules/jest-jasmine2/build/jasmineAsyncInstall.js:102:37)
at resolve (/Users/elsa/workspace/github.com/mrdulin/jest-codelab/node_modules/jest-jasmine2/build/queueRunner.js:43:12)
at new Promise (<anonymous>)
Test Suites: 1 passed, 1 total
Tests:       2 passed, 2 total
Snapshots:   0 total
Time:        1.066s

您可以在此处找到完整的 TypeScript 演示。

Answer 2

从测试的角度来看，您应该测试失败请求的效果，一些错误消息弹出窗口等。 与间谍严格连接实施，而不是效果，但在某些情况下是有意义的，这是你的选择:)