Почему этот макет api работает не так, как ожидалось?

Question

Я пытаюсь проверить этот простой модуль 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 

Я не смог понять, почему это не работает. Почему я получаю сообщение об ошибке «Неожиданный конец ввода JSON»? И как я могу успешно исправить выборку локально в тесте? В this medium post это делается в основном таким же образом.

Answer 1

Так что, по-видимому, тест по-прежнему использует глобальную библиотеку fetch, а не мою исправленную версию. Раствор составлял:

1. Удалить «изоморфный выбор» (в __mocks__ в корне проекта).
2. Import 'изоморфны-Fetch один раз в корне моего проекта с import 'isomorphic-fetch;
3. Удалить "изоморфный-Fetch импорта в верхней части моего апи модуля (так как он уже импортирован в EntryPoint
4. модифицирует тест чтобы:

тест:

// 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)); 
    }); 
    }); 
}); 

Answer 2

Скорее всего, потому что ваша функция getJson не использует глобальное (окно) fetch.

Способ, которым я предлагаю сделать это, - использовать Dependency Injection (DI); make getJson получить библиотеку/функцию «http request» (в вашем случае fetch), а в ваших тестах создать макетную функцию, которая вводится. Функция mock вернет данные, которые вы хотите как часть тестирования.