Ошибка при имитации запросов на выборку с помощью Jest: TypeError: Невозможно прочитать свойство 'createEvent' из null ' - PullRequest
1 голос
/ 31 мая 2019

Я пытаюсь написать тестовые примеры для моего приложения 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' }]
    });
  });
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...