如何使用赛普拉斯反应单元测试来测试受控的React组件

问题描述

我正在努力了解如何在使用cypress-react-unit-test时更新反应组件的道具。

这里我有一个简单的受控输入组件。

>>> df = pd.DataFrame({'a': ['abc,def,ghi','jkl,mno'],'b': [1,2]})
>>> df
               a  b
0  abc,ghi  1
1        jkl,mno  2

>>> df.a.str.split(',')
0    [abc,ghi]
1           [jkl,mno]
Name: a,dtype: object

然后我想通过给该组件一个初始值interface MyInputProps { inputVal: string onInputChanged(val: string): void } export const MyInput = ({ inputVal,onInputChanged }: MyInputProps) => { return <input type='text' value={inputVal} onChange={e => onInputChanged(e.target.value)} /> } 来测试该组件，然后执行类似''的操作。然后，我希望会调用cy.get('input').type('a')回调。

但这就是我遇到的问题。如何处理更新后的值（onInputChanged）？我不能在测试内部使用钩子或状态，那么如何使用更新后的值重新渲染组件？先执行'a'，然后执行mount(<MyInput inputVal='' />)似乎是错误的，因为那时候我要安装其他组件，而我没有测试该组件对道具更新的反应。

mount(<MyInput inputVal='a' />)

解决方法

我认为问题不在您的测试中，而是在您的MyInput组件上。
将您的状态设为MyInput或使用defaultValue代替value：

export const MyInput = ({ inputVal,onInputChanged }: MyInputProps) => {
  return (
    <input
      type="text"
      defaultValue={inputVal}
      onChange={(e) => onInputChanged(e.target.value)}
    />
  );
};

如您所知，设置value={inputVal}将使输入永不更改，仅在更改inputVal时更改。