testing - 如何从模块中模拟特定功能以进行特定测试(Jest)
问题描述
我有一个 api.js 文件,其中包含我的 api 调用。它看起来像这样:
// api.js
// reusable fetch call
export const makeFetch = async (url, options) => {
try {
const response = await fetch(url, options);
if (!response.ok) {
throw new Error(`${response.status}`);
}
return await response.json();
} catch (error) {
throw new Error(`Network request failed. (error: ${error.message})`);
}
};
// actual fetch call
export const getCards = async () => {
const url = 'http://localhost:3001/api/v1/cards';
return await makeFetch(url);
};
然后我有一个 api.test.js 文件,如下所示:
//api.test.js
import { makeFetch, getCards } from './api';
describe('makeFetch', () => {
// three successful tests
});
// this is where I have issues
describe('getCards', () => {
it('calls makeFetch', async () => {
await getCards();
expect(makeFetch).toHaveBeenCalledTimes(1);
});
});
这是我得到的错误:
FAIL src\api\api.test.js
● getCards › calls makeFetch
ReferenceError: makeFetch is not defined
at Object.it.only (src/api/api.test.js:51:15)
at new Promise (<anonymous>)
at Promise.resolve.then.el (node_modules/p-map/index.js:46:16)
at <anonymous>
at process._tickCallback (internal/process/next_tick.js:182:7)
有谁知道如何通过使我以前的测试失败来通过此测试?感谢您的时间。
解决方案
您需要创建一个 makeFetch 的模拟。您可以使用spyOn和mockReturnValue来做到这一点。
您需要将 makeFetch 移动到它自己的文件 (lib.js) 中,以便您可以在测试中模拟和替换它:
// ---- lib.js ----
// reusable fetch call
export const makeFetch = async (url, options) => {
try {
const response = await fetch(url, options);
if (!response.ok) {
throw new Error(`${response.status}`);
}
return await response.json();
} catch (error) {
throw new Error(`Network request failed. (error: ${error.message})`);
}
};
// ---- api.js ----
import { makeFetch } from './lib';
// actual fetch call
export const getCards = async () => {
const url = 'http://localhost:3001/api/v1/cards';
return await makeFetch(url);
};
// ---- api.test.js ----
import * as lib from './lib';
import { getCards } from './api';
describe('makeFetch', () => {
// three successful tests
});
describe('getCards', () => {
it('calls makeFetch', async () => {
const simulatedResponse = { data: 'simulated response' };
// mock makeFetch
const mock = jest.spyOn(lib, 'makeFetch');
mock.mockReturnValue(Promise.resolve(simulatedResponse));
const result = await getCards();
expect(result).toEqual(simulatedResponse);
expect(mock).toHaveBeenCalledTimes(1);
expect(mock).toHaveBeenCalledWith('http://localhost:3001/api/v1/cards');
// restore makeFetch
mock.mockRestore();
});
});
推荐阅读
- react-native - react-native run-android 失败——找不到 Kotlin
- php - 如何将自定义字段作为抄送添加到 WooCommerce 客户订单电子邮件
- java - 从 Java 中的 AbstractPdfView 通过电子邮件发送 PDF
- c# - 需要使用 TaskCompletionSource 保持代码执行直到属性为空
- javascript - 使用 React-Hooks 单击按钮后如何显示不同的组件?
- string - 删除scala中字符串中所有匹配模式的子字符串
- java - 如何打印由另一个类引用的所有对象
- php - 获取列sql中的值
- android - 将数据从 recyclerView 传递到另一个 recycleView
- facebook - 应用审核成功后,FB live API 失败