reactjs - 如何使用 cypress-react-unit-test 测试受控的 React 组件

Question

我正在努力了解如何在使用 cypress-react-unit-test 时更新 react 组件的 Prop 。
这里我有一个简单的受控输入组件。

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' )？我不能在测试中使用钩子(Hook)或状态，那么如何让我的组件使用更新的值重新渲染？做 mount(<MyInput inputVal='' />)似乎不对，然后 mount(<MyInput inputVal='a' />)因为那时我正在安装一个不同的组件，并且我没有测试该组件对 Prop 更新的 react 。

// MyInput.spec.tsx
describe('My Input', () => {
    it('updates when props change', () => {
        mount(<MyInput
            inputVal=''
            onInputChanged={(newVal) => {
                /* What do I do here? How do I update the props */
                return null
            }}
        />);
        
        /* Update props */
        /* Re-render somehow */
    })
})

Answer 1

我认为问题不在于您的测试，而在于您的 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 .