Рассмотрим следующий пользовательский хук извлечения:
import { useEffect, useState } from 'react';
const useFetch = ({
url,
request,
initialData = {},
fetch = window.fetch.bind(window),
}) => {
const [data, update] = useState(initialData);
const fetchData = async () => {
const resp = await fetch(request || url);
const json = await resp.json();
update(json);
};
fetchData();
return data;
};
Я пошел писать тесты для него примерно так:
const TestHook = ({ hook, args }) => {
const res = hook(...args);
return <div result={res} />;
};
let fakeFetch;
beforeEach(() => {
fakeFetch = jest.fn();
});
describe('fakeFetch', () => {
it('should use initialData when present', () => {
const args = [{
url: 'http://foo.com',
initialData: 3,
fetch: fakeFetch,
}];
const wrapper = mount(<TestHook hook={useFetch} args={args} />);
const { result } = wrapper.find('div').props();
expect(result).toBe(3);
});
it('should update with new data from the fetch', done => {
fakeFetch.mockReturnValueOnce(fakeResponseFactory('foo'));
const args = [{
url: 'http://foo.com',
intialData: 'baz',
fetch: fakeFetch,
} ];
const wrapper = mount(<TestHook hook={useFetch} args={args} act={act}/>);
const { result } = wrapper.find('div').props();
expect(result).toEqual('baz');
setTimeout(() => {
act(() => wrapper.update());
const { result } = wrapper.find('div').props();
expect(result).toEqual('foo');
done();
}, 10);
});
});
Второй тест не пройден, потому что, насколько я могу судить,он запомнил вызов с первой имитацией, которая ничего не возвращает, то есть я получаю ошибку «Cannot read property 'json' undefined».
Переключение ловушки на использование позиционных аргументов решает проблему (как иотключение первого теста).Есть ли способ заставить его работать с объектом параметров для имитации аргументов ключевых слов?