Блог

Главная - Вопросы по программированию - Компонент тестирования в определенном состоянии с помощью библиотеки тестирования React

Компонент тестирования в определенном состоянии с помощью библиотеки тестирования React

#reactjs #unit-testing #jestjs #react-testing-library

#reactjs #модульное тестирование #jestjs #react-testing-library

Вопрос:

Для одного из моих компонентов React требуется установить определенное значение состояния перед рендерингом части компонента. Я хочу иметь возможность установить желаемое состояние с помощью библиотеки тестирования React, чтобы протестировать компонент в этом конкретном состоянии.

Упрощенная версия компонента:

 constructor(props) {
  super(props);
  this.state = {
    renderPartOfComponent: false
  };
}

renderPartOfComponent() {
  this.setState({ renderPartOfComponent: true });
}

render() {
  return (
    <div>
      {this.state.renderPartOfComponent amp;amp; <div>This is visible when state is true</div>}
    </div>
  )
}

Тест:

 test("test component", () => {
  // Pass something to set renderPartOfComponent to true
  const { getByText } = render(<Component />);
  expect(getByText("This is visible when state is true")).toBeTruthy();
});

Комментарии:

1. Вы не обновляете состояние напрямую, используя что-то из react-testing-library , вы скорее имитируете взаимодействие с пользователем, используя react-testing-library это, чтобы обновить состояние, поскольку оно должно обновляться вашим компонентом. Можете ли вы добавить еще немного кода, чтобы показать нам, как renderPartOfComponent обновляется?

2. Я подозревал это. Я добавил для него метод, точно такой, как он предназначен для использования.

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

4. Когда вы вызываете renderPartOfComponent функцию? Это ключ к пониманию вашего компонента. Например, если вы вызываете эту функцию по нажатию кнопки, ваш тест должен нажать эту кнопку.