Блог

Главная - Вопросы по программированию - Модульный тест с реактивным крючком завершается с ошибкой

Модульный тест с реактивным крючком завершается с ошибкой

#javascript #reactjs #unit-testing #jestjs #enzyme

#javascript #reactjs #модульное тестирование #jestjs #фермент

Вопрос:

Я не понимаю результат, который я получаю в этом модульном тестировании. Я ожидаю, что вторая проверка 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 amp;amp; 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." />

Итак, почему тест завершается неудачей?

Комментарии:

1. Где перехват? РЕДАКТИРОВАТЬ: с головы до ног — вам нужно это обернуть act ?

2. Я думаю, вам нужно запустить событие с помощью simulate, иначе как бы оболочка фермента узнала, что компонент недействителен?

3. Я попытался обернуть его в act, и это дало тот же результат. Спасибо за предложение.

Ответ №1:

Проблема заключалась в том, что мне нужно было изменить объявление на let textField = wrapper.findWhere((el) => el.type() === TextField amp;amp; el.props().id === 'name') , а затем повторно объявить textField

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

чтобы обновить значение в DOM