使用 React Hook 的单元测试失败

Question

我不明白我在这个单元测试中得到的结果。我希望 textField.valid 的第二次检查是 true 而不是 returns 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." />

那么为什么测试失败了？

Answer 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

中的值

使用 React Hook 的单元测试失败

Unit test with react hook fails

javascript

unit-testing

reactjs

jestjs

enzyme