带有反应钩子的单元测试失败答案

【问题标题】：Unit test with react hook fails带有反应钩子的单元测试失败
【发布时间】：2023-04-01 05:13:01
【问题描述】：

我不明白我在这个单元测试中得到的结果。我希望textField.valid 的第二次检查是true，而是返回false。

以下是我正在测试的组件的一部分：

export const FeedbackForm = ({ closeFunc }) => {
  const [response, setResponse] = useState(false)
  const [name, changeName] = useState('')
  const [email, changeEmail] = useState('')
  const [feedback, changeFeedback] = useState('')
  const [patching, setPatching] = useState(false)
  const emailRegex = /^[\w-.]+@([\w-]+.)+[\w-]{2,4}$/g

...

 <TextField
    id='name'
    label='Name'
    defaultValue={name}
    onChange={(event) => {
      changeName(event.target.value)
    }}
    disabled={patching}
    valid={name !== ''}
    warning='Name cannot be blank.'
  />

下面是我正在运行的测试：

  test('should validate the name field', () => {
    const wrapper = shallow(<FeedbackForm />)
    const textField = wrapper.findWhere((el) => el.type() === TextField && el.props().id === 'name')
    expect((textField).prop('valid')).toBe(false)
    textField.props().onChange({
      target: {
        name: 'changeName',
        value: 'Dude Man',
      },
    })
    console.log(wrapper.debug())
    expect((textField).prop('valid')).toBe(true)
  })

console.log(wrapper.debug()) 的输出如下：

<form onSubmit={[Function: handleSubmit]} noValidate={true}>
          <TextField id="name" label="Name" defaultValue="Dude Man" onChange={[Function: onChange]} disabled={false} valid={true} warning="Name cannot be blank." />

那么为什么测试失败了？

【问题讨论】：

钩子在哪里？编辑：在我的脑海中 - 你需要把它包裹在act吗？
我认为你必须通过模拟来触发事件，否则酶包装器如何知道使组件无效？
我尝试将它包装在实际中，它产生了相同的结果。谢谢你的建议。

标签： javascript reactjs unit-testing jestjs enzyme

【解决方案1】：

问题是我需要将声明更改为let textField = wrapper.findWhere((el) => el.type() === TextField && el.props().id === 'name')，然后重新声明textField

textField = wrapper.findWhere((el) => el.type() === TextField && el.props().id === 'name')

更新 DOM 中的值

【讨论】：