Блог

Допустим, у меня есть простой функциональный компонент React, который в основном просто наблюдает за изменениями в контексте и отображает некоторое представление о состоянии из контекста.

 export default function Observer(props) {
  // I have a separate dispatch context for performance. This component doesn't dispatch
  const state = useContext(SomeContext);
  
  return (
    <div>Foo is now {state.foo}</div>
  )
}
 

Для тестирования в библиотеке тестирования jest/react я представлял себе несколько возможностей:

1. Подключите оболочку для контекста, которая просто создает экземпляры разных состояний для каждого теста. Кажется, что это было бы легко и просто. Это типичная картина?
2. Создайте экземпляр каждого теста с реальным начальным состоянием. Затем каким-то образом измените состояние и ожидайте обновления компонента. Возможно, как-то использовать отправку из тестового кода. В большинстве примеров я вижу события пожара, но этот компонент ничего не отправляет, он просто наблюдает.
3. Визуализация большей части приложения с другими компонентами, которые обновляют состояние. Это кажется плохим выбором для модульного тестирования небольшого простого компонента.

Первый вариант-это путь, по которому нужно идти. Как вы уже упоминали, рассматриваемый компонент является потребителем контекста. Таким образом, если ему придается какое-то значение для контекста, он, безусловно, будет его использовать.

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

 
const renderComponent = (contextValue) => {
  render(
    <SomeContextProvider value={contextValue}>
      <Observer />
    </SomeContextProvider>
  );
};

test('my test case name', () => {
  render({foo: abc});
  expect(screen.getByText('Foo is now abc')).toBeInTheDocument();
})
 

Немного хорошего чтения здесь https://testing-library.com/docs/example-react-context/