Реакция тестирования, если состояние хука было обновлено дочерним компонентом

Question

Я прочитал несколько статей о тестировании React Hooks, и кажется, что общий совет - не тестировать напрямую состояние. Мы хотим проверять то, что пользователь действительно увидит. В моей ситуации у меня есть крючок, который является либо истинным, либо ложным. Этот хук определит, что будет отображаться в моем компоненте. Также этот хук передается как опора ребенку, в котором происходит изменение состояния.

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

Родительский компонент имеет следующие хук и функцию:

export const AssignRoles = props => {
  let [openForm, setOpenForm] = useState(false);

  const handleFormOpen = (type) => { 
    setOpenForm(openForm = !openForm);
  };

return (
    <div>
      <div>
        {openForm ? <Component /> : < OtherComponent formOpen={handleFormOpen}/>}
      </div>
    </div>
  );
};

Хук openForm изначально имеет значение false, поэтому<OtherComponent> загружает и принимает нашу функцию обновления хуков в качестве опоры.

Я хочу написать тест, который проверяет, что визуализируется, когда openForm = true

Я попробовал несколько тестов. как это:

it('renders <Component/>', () => {
  let openForm = true
  const wrapper = mount(<AssignRoles openForm={openForm}/>);
  expect(wrapper).toContain(<Component/>);
});

но не удалось.

Answer 1

Добавьте начальное состояние в качестве значения реквизита:

export const AssignRoles = ({initialOpenForm = false}) => {
  let [openForm, setOpenForm] = useState(initialOpenForm);

  const handleFormOpen = () => { 
    setOpenForm(!openForm);
  };

return (
    <div>
      <div>
        {openForm ? <Component /> : < OtherComponent formOpen={handleFormOpen}/>}
      </div>
    </div>
  );
};

Затем в вашем тесте:

it('renders <Component/>', () => {
  const wrapper = mount(<AssignRoles initialOpenForm={true}/>);
  expect(wrapper).toContain(<Component/>);
});