Я пытаюсь написать тестовые примеры для моего приложения React с Jest в качестве тестового прогона (по умолчанию создается конфигурация приложения реакции). Я издеваюсь над методами, делающими мои вызовы API, используя папку mocks для хранения файла с методами для возврата Promises, которые разрешаются с данными API. Мой компонент вызывает эти методы обработки API в асинхронном методе с ключевым словом await. Асинхронный вызов / ожидание обернут в попытку. Ответ от метода API используется для обновления состояния. Ответ приходит и даже виден в console.log, но немедленный setState после использования этого ответа выдает следующую ошибку:
'TypeError: Невозможно прочитать свойство' createEvent 'из null'
И есть предупреждение:
'Предупреждение: невозможно обновить во время существующего перехода состояния (например, при рендеринге). Методы рендеринга должны быть чистой функцией реквизита и состояния. '
Забавно, у меня есть 5 отдельных вызовов API, а все остальные 4 успешно обновляют свое состояние, кроме этого вызова API.
В моем коде есть вызовы API, и этот конкретный компонент имеет 5 вызовов API. Моя структура кода такова, что существует файл с именем services.js, в котором есть методы, выполняющие вызовы API.
// src/services.js
// A method for making POST calls
export const postData = (url, data) => {
return fetch(url, {
method: 'POST',
body: data,
headers
}).then(fetchErrorHandler);
}
// Method to handle response of the API calls
export const fetchErrorHandler = response => {
if (response.ok) {
return response;
} else {
const err = new Error();
err.status = response.status;
err.response = response;
if (response.status === 400) {
err.body = response.json().then(body => body);
}
throw err;
}
};
// Actual method used for doing this particular API call
export const makeSampleAPICall = () => {
return postData(URL, formData).then(resp => resp.json());
}
И я использую его в своих компонентах следующим образом:
async fetchSomeData() { // This is a bound class method getting called.
try {
const response = await makeSampleAPICall();
const { data } = response;
this.setState({ previousAnnotations: data });
} catch (e) {
console.error(e);
}
}
Мой тестовый пример - это простой глубокий рендер:
it('deep renders component', () => {
mount(<MyComponent />);
}
И мой метод API:
// src/__mocks__/services.js
export function makeSampleAPICall() {
return new Promise(resolve => {
resolve({
data: [{ some: 'data' }]
});
});
}