使用浅层反应测试 - 无法调用 props() 及其后续函数，因为组件由状态控制

如何解决使用浅层反应测试 - 无法调用 props() 及其后续函数，因为组件由状态控制

我只是在 React 中使用浅层学习测试

我有一个父组件和一个子组件

父组件有一个定义为：

 <?PHP

if(session()->has('error_controller'))
  echo "<div>" . session()->getFlashdata('error_controller') . "</div>";
    }else{
        echo "no-no";
    }
?>

并且在这个父组件的 const [searchOpen,setSearchOpen] = useState(false); const performAnAction = () => { setSearchOpen(false); } const changeSearch = async () => { await setSearchOpen(true); }; 内部正在调用子组件，但它确实检查了条件标志 searchOpen ，例如 -

return

其中 return ( if(searchOpen && <childComponent performAnAction= {performAnAction} changeSearch={changeSearch}/> } ) 是一个函数。

但是在performAnAction

parentComponent.test.js

但我收到此错误：

it('should render the Child Component',async () => {
  const component = shallow(<ParentComponent {...props} />);
  const child = component.find('childComponent');
  expect(child).tobedefined();
  await child.props().performAnAction();
});

当我移除标志时，它按预期工作。但由于在页面加载时它是假的，我不确定它是否进入 DOM。

所以我的猜测是我们需要在测试用例文件中使标志为真，如果我错了，请纠正我。

伙计们，这是让您理解的非常少的代码，如果有任何问题，请随时发表评论，因为我是该平台的新手

解决方法

在您的 return 行中，您使用的是 searchOpen 变量，它在初始化时默认为 false。

在您的测试中，shallow(<ParentComponent {...props} />);，ParentComponent 会将其 searchOpen 状态初始化为 false，这就是您的 return 不会返回 ChildComponent 的原因。错误是正常的！

为了能够渲染 childComponent，你要么需要

1. 移除条件
2. 将 searchOpen 初始化为 true（使用 useState(true)）
3. 或者在测试中调用 changeSearch 函数，将 searchOpen 变量设置为 true：

it('should render the Child Component',async () => {
  const wrapper = shallow(<ParentComponent {...props} />);

  // Call changeSearch function to update searchOpen's value
  const parentComponent = wrapper.instance();
  parentComponent.changeSearch();
  wrapper.update(); // to update the component's state

  const child = wrapper.find('childComponent');
  expect(child).toBeDefined();
  await child.props().performAnAction();
});