Тестирование нескольких изменений состояния компонента React с использованием Test Renderer - PullRequest
Новая
       67

Тестирование нескольких изменений состояния компонента React с использованием Test Renderer

0 голосов
/ 30 апреля 2020

Компонент, который я пытаюсь протестировать, имеет состояние isSubmitting, которое устанавливается в значение true, когда мы пытаемся отправить форму, а затем устанавливается в значение false, когда мы получаем ответ от сервера.

Я хочу проверить состояние компонента после каждого обновления состояния. 

const Component = () => {
  const [isSubmitting, setIsSubmitting] = useState();

  const handlePress = async () => {
      setIsSubmitting(true);
      await submitForm();
      setIsSubmitting(false);
  };

  return (
    <>
      <button onPress={() => this.handlePress} />
      {isSubmitting && <IsSubmitting />}
    </>
  )
}

Я могу проверить только состояние первого компонента, например. когда я обновляю isSubmitting до true. 

import React from 'react';
import { act, create } from 'react-test-renderer';
import Component from './Component';

it('shows loading screen after submit, and hides it after', async () => {
  jest.spyOn(form, 'submitForm').mockResolvedValue();

  const wrapper = create(<Component />);

  act(() => {
    wrapper.root.findByType(Button).props.onPress();
  });

  expect(wrapper.root.findByType(IsSubmitting)).toBeDefined();
});

Как я могу проверить, что компонент IsSubmitting впоследствии скрыт? Я также получаю сообщение об ошибке, не включив обновление в act (). 

  console.error node_modules/react-test-renderer/cjs/react-test-renderer.development.js:104
    Warning: An update to Component inside a test was not wrapped in act(...).

    When testing, code that causes React state updates should be wrapped into act(...):

    act(() => {
      /* fire events that update state */
    });
    /* assert on the output */

    This ensures that you're testing the behavior the user would see in the browser. Learn more at https://reactjs.org/docs/test-utils.html#act
        in Component

1 Ответ

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

Мне пришлось дважды вызвать функцию act. В первый раз без ожидания и во второй раз с asyn c await. 

  const wrapper = create(<Component />);

  act(() => {
    wrapper.root. findByType(Button).props.onPress();
  });

  expect(wrapper.root.findByType(IsSubmitting)).toBeDefined();

  await act(async () => {});

  expect(wrapper.root.findAllByType(IsSubmitting)).toStrictEqual([]);'

Таким образом, я могу тестировать компонент в обоих состояниях.

...