为什么这个 mock api 没有按预期工作?
Why does this mock api not work as expected?
我正在尝试测试这个简单的 api 模块:
import fetch from 'isomorphic-fetch';
export const getJson = (endpoint: string) => {
const options = { credentials: 'include', method: 'GET' };
return fetch(endpoint, options)
.then(response => response.json()
.then(json => {
if (response.ok) return json;
return Promise.reject(json.errors);
})
)
.catch(error => {
if (error.constructor === Array) return error;
return [error.message];
});
};
在这个测试中,我在模拟提取:
import { getJson } from '../api';
const mockResponse = (status, statusText, response) => {
return new window.Response(response, {
status: status,
statusText: statusText,
headers: {
'Content-type': 'application/json'
}
});
};
describe('api middleware', () => {
describe('getJson', () => {
it('should return the response on success', () => {
const expected = { data: ['data'], meta: {} };
const body = JSON.stringify(expected);
window.fetch = jest.fn().mockImplementation(() =>
Promise.resolve(mockResponse(200, null, body)));
return getJson('http://endpoint').then(actual => expect(actual).toEqual(expected));
});
});
});
但测试失败:
Expected value to equal:
{"data": ["data"], "meta": {}}
Received:
["Unexpected end of JSON input"]
Difference:
Comparing two different types of values:
Expected: object
Received: array
我一直无法弄清楚为什么这不起作用。为什么我会收到 "Unexpected end of JSON input" 错误?以及如何在测试中成功地在本地模拟提取?在 this medium post 中,它以基本相同的方式完成..
很可能是因为您的 getJson
函数没有使用全局 (window) fetch
。
我建议的方法是使用 Dependency Injection (DI);使 getJson
检索 "http request" library/function(在你的情况下 fetch
)并在你的测试中,创建一个注入的模拟函数。模拟函数将 return 您想要的数据作为测试的一部分。
显然测试仍在使用全局获取库,而不是我的补丁版本。解决方案是:
- 删除 'isomorphic-fetch' 模拟(在项目根目录的
__mocks__
中)。
- 使用
import 'isomorphic-fetch;
在我的项目的根目录导入一次 'isomorphic-fetch'
- 删除我的 api 模块顶部的 'isomorphic-fetch' 导入(因为它已经在入口点导入
- 将测试更新为:
测试:
// to make the Response constructor available
import 'isomorphic-fetch';
import { getJson } from '../api';
describe('api middleware', () => {
describe('getJson', () => {
beforeEach(() => {
window.fetch = jest.genMockFunction();
});
it('should return the response on success', () => {
const expected = { data: ['data'], meta: {} };
const body = JSON.stringify(expected);
const init = { status: 200, statusText: 'OK' };
window.fetch.mockReturnValueOnce(Promise.resolve(new Response(body, init)));
return getJson('http://endpoint').then(actual => expect(actual).toEqual(expected));
});
});
});
我正在尝试测试这个简单的 api 模块:
import fetch from 'isomorphic-fetch';
export const getJson = (endpoint: string) => {
const options = { credentials: 'include', method: 'GET' };
return fetch(endpoint, options)
.then(response => response.json()
.then(json => {
if (response.ok) return json;
return Promise.reject(json.errors);
})
)
.catch(error => {
if (error.constructor === Array) return error;
return [error.message];
});
};
在这个测试中,我在模拟提取:
import { getJson } from '../api';
const mockResponse = (status, statusText, response) => {
return new window.Response(response, {
status: status,
statusText: statusText,
headers: {
'Content-type': 'application/json'
}
});
};
describe('api middleware', () => {
describe('getJson', () => {
it('should return the response on success', () => {
const expected = { data: ['data'], meta: {} };
const body = JSON.stringify(expected);
window.fetch = jest.fn().mockImplementation(() =>
Promise.resolve(mockResponse(200, null, body)));
return getJson('http://endpoint').then(actual => expect(actual).toEqual(expected));
});
});
});
但测试失败:
Expected value to equal:
{"data": ["data"], "meta": {}}
Received:
["Unexpected end of JSON input"]
Difference:
Comparing two different types of values:
Expected: object
Received: array
我一直无法弄清楚为什么这不起作用。为什么我会收到 "Unexpected end of JSON input" 错误?以及如何在测试中成功地在本地模拟提取?在 this medium post 中,它以基本相同的方式完成..
很可能是因为您的 getJson
函数没有使用全局 (window) fetch
。
我建议的方法是使用 Dependency Injection (DI);使 getJson
检索 "http request" library/function(在你的情况下 fetch
)并在你的测试中,创建一个注入的模拟函数。模拟函数将 return 您想要的数据作为测试的一部分。
显然测试仍在使用全局获取库,而不是我的补丁版本。解决方案是:
- 删除 'isomorphic-fetch' 模拟(在项目根目录的
__mocks__
中)。 - 使用
import 'isomorphic-fetch;
在我的项目的根目录导入一次 'isomorphic-fetch'
- 删除我的 api 模块顶部的 'isomorphic-fetch' 导入(因为它已经在入口点导入
- 将测试更新为:
测试:
// to make the Response constructor available
import 'isomorphic-fetch';
import { getJson } from '../api';
describe('api middleware', () => {
describe('getJson', () => {
beforeEach(() => {
window.fetch = jest.genMockFunction();
});
it('should return the response on success', () => {
const expected = { data: ['data'], meta: {} };
const body = JSON.stringify(expected);
const init = { status: 200, statusText: 'OK' };
window.fetch.mockReturnValueOnce(Promise.resolve(new Response(body, init)));
return getJson('http://endpoint').then(actual => expect(actual).toEqual(expected));
});
});
});