Как я могу проверить свои действия, состояние и пользовательский интерфейс. Я использую контекстный API с Jest и Testing-библиотекой? - PullRequest
Новая
       10

Как я могу проверить свои действия, состояние и пользовательский интерфейс. Я использую контекстный API с Jest и Testing-библиотекой?

0 голосов
/ 13 марта 2020

У меня есть контекст, обернутый вокруг моего приложения с некоторым состоянием. Я получаю доступ к state и dispatch в моих компонентах через мои хуки useMyState и useMyDispatch (просто упрощенно). Тогда у меня есть полные действия, где все управление состоянием происходит, и мой редуктор очень тонкий Просто распределяет новую полезную нагрузку и возвращает состояние. Мое действие выглядит следующим образом: 

async function myAsyncFunction(dispatch: CurrencyDispatch, state: CurrencyState, name: string) {

  const thingOne = sompute thing...
  const thingTwo = await getThing();

  dispatch({
    type: ActionTypes.SOME_ACTION,
    payload: {
      thingOne,
      thingTwo,
    },
  });
}

В провайдере приложений происходят некоторые действия, такие как выборка и установка какого-либо начального состояния до появления пользовательского интерфейса, а я показываю счетчик. Как проверить эти действия и посмотреть, обновляется ли глобальное хранилище должным образом?

Я тестирую с jest и testing-library/react

test('Render with initial state', async () => {
  const {getByText, getByTestId} = render(
    <Provider>
      <MyApp/>
    </Provider>
  );

  await waitForElementToBeRemoved(() => getByTestId('loader'));
  expect(getByText('My title')).toBeInTheDOM();
});

Тест не пройден. Здесь я заканчиваю Spinner, потому что мое приложение, которое устанавливает начальное состояние, не было вызвано.

  • Как правильно в этом случае смоделировать мой myAsyncFunction?
  • Как отправить ложные данные?
  • Как прочитать новое состояние и проверить если пользовательский интерфейс обновляется, как я ожидаю?
...