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最初为假，因此<OtherComponent>加载并以我们的钩子更新程序为道具。

我想做的是编写一个测试，检查openForm = true

时呈现的内容

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

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

但没有成功。

Answer 1

将初始状态添加为prop值：

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

如果子组件更新了挂钩状态，则进行测试

1 个答案: