如果 Hook State 被子组件更新，则进行反应测试

Question

我已经阅读了几篇关于测试 React Hooks 的文章，似乎一般建议不要直接测试 state。 我们想要测试用户实际看到的东西。 在我的情况下，我有一个对或错的钩子。 这个钩子将决定在我的组件中呈现什么。 这个钩子也作为道具传递给一个孩子，这是 state 更改将发生的地方。

我正在寻找一种方法来在我的测试中设置初始钩子 state，这样我就不必通过在我的测试中渲染子组件和上下文来 go 只需单击一个按钮。

父组件有如下钩子和function：

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最初是假的，所以<OtherComponent>加载并将我们的钩子更新器 function 作为道具。

我想要做的是编写一个测试来检查openForm = true时呈现的内容

我已经尝试了一些这样的测试：

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

但一直没有成功。

Answer 1

添加初始 state 作为道具值：

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/>);
});