Как я должен смоделировать состояние в функциональном компоненте с отслеживанием состояния при проверке состояния?

Question

Если у меня есть функциональный компонент с состоянием, который использует хуки состояния, как я могу манипулировать состоянием снаружи компонента? Я хочу иметь возможность изменять состояние в моих тестах, чтобы я мог проверить, как изменяется dom.

Я хочу иметь возможность изменять значение чего-то подобного извне компонента:

const [sent, setSent] = useState(false);

Answer 1

Я бы не проверял внутреннее состояние компонента, а скорее то, что это состояние может представлять. Использование состояния - это деталь реализации, и вы должны проверить, правильно ли реализована спецификация, а не как.

В вашем случае я бы использовал следующий подход:

1. Вызовите функцию, которая должна установить состояние отправки (нажатие кнопки, отправка формы)
2. Проверка правильности обработки отправленного статуса в вашем компоненте (отображается сообщение об успешном завершении?)

Тестирование состояния загрузки вызовов API может быть достигнуто с помощью макетов. Если вы не используете какую-то необычную библиотеку, а просто делаете обычную await apiCall(), тогда вы можете использовать следующий подход:

1. Смоделируйте вызов API (вы, вероятно, уже делаете это)
2. Return Promise() из макета, который не разрешится

Пример с ферментом:

import { apiCall } from '../api';
jest.mock('../api');
// ...

it('Contains a <Loading /> on loading', () => {
  // The promise won't be resolved so the loading state will persist
  apiCall.mockReturnValue(new Promise(() => null));

  // await act... and wrapper.update() might not be needed 
  // depending on your implementation
  await act(async () => {
    wrapper.find(SubmitButton).simulate('click');
  });
  wrapper.update();

  expect(wrapper.find(Loading)).toHaveLength(1);
});