Почему часть «then» в тесте asyn c не проходит в шутку? - PullRequest
Новая
       84

Почему часть «then» в тесте asyn c не проходит в шутку?

0 голосов
/ 02 мая 2020

Компонент: 

export const fetchList = () => {
  return API.get(AMPLIFY_ENPOINTS.default, API_URLS.list, { response: true });
}

const List: React.FC = () => {
  const dispatch = useDispatch();
  const setError = useError();

  useEffect(() => {
    fetchList()
      .then((response) => {
        if (response && response.data?.length) {
          dispatch(setList(response.data));
        }
      })
      .catch((error) => {
        setError(error);
      });
  }, [])
}

Тест: 

it('should fetch list', async () => {
  const wrapper = mount(
    <Provider store={store}>
      <List />
    </Provider>
  );
  API.get = jest.fn().mockImplementation(() => Promise.resolve({ data: mockList }));
  const response = await fetchList();
  console.log(store.getActions(), response); // HERE IS THE ISSUE
});

Таким образом, store.getActions() возвращает setError из catch блок, почему это? Он должен вернуть setList из блока then. Что я делаю неправильно? response переменная возвращает mockList просто отлично.

Редактировать Возвращаемая ошибка: API not configured, я использую aws усиление.

1 Ответ

1 голос
/ 02 мая 2020

fetchList вызывается, когда компонент монтируется, насмешливый API.get не влияет на первый вызов, а второй вызов ничего не делает. Это плохая практика - имитировать методы, назначая им шпионов, потому что они не могут быть восстановлены после теста.

Проблема с fetchList заключается в том, что его нельзя шпионить или высмеивать, потому что он используется в том же модуле, что и он. определены. Обещание, которое оно создает в useEffect, не может быть объединено в цепочку, обещания должны быть сброшены, чтобы избежать состояния гонки.

Это может быть: 

  let flushPromises = () => new Promise(resolve => setImmediate(resolve));

  jest.spyOn(API, 'get').mockResolvedValue({ data: mockList });

  const wrapper = mount(
    <Provider store={store}>
      <List />
    </Provider>
  );

  await flushPromises();

  expect(store.getActions())...
...