Reactjs - модульный тест, вызывающий бесконечный цикл, по ожидаемому (обертка) .toMatchSnapshot ()

Question

Я новичок в реакции, шутке и энзиме, и сейчас я нахожусь в процессе добавления какого-то модульного теста в мое приложение для реагирования и столкнулся с проблемой, которая застряла у меня на некоторое время.

Я использую монтирование из энзима для рендеринга компонента, проблема возникает, когда я пытаюсь выполнить функцию «well (wrapper) .toMatchSnapshot () », когда приложение застревает в бесконечном цикле. Я замечаю две вещи: когда я использую мелкое, бесконечный цикл не происходит, но в этой конкретной ситуации мне нужно использовать mount, потому что я использую ref в компоненте DetailsCustomer.js, а файл snapshots не создается внутри тестовой папки.

Это мой тест:

DetailsCustomer.test.js

import React from 'react'
import { configure, mount } from 'enzyme'
import Adapter from 'enzyme-adapter-react-16'
import { DetailsCostumer } from 'containers/SignUp/DetailsCostumer/DetailsCostumer'

configure({ adapter: new Adapter() })

describe('DetailsCostumer', () => {
  const clickFn = jest.fn();

  it ('should render correctly <DetailsCostume ./> component', ()=> {
    const wrapper = mount(<DetailsCostumer isDuplicated={true} />)
    expect(wrapper).toMatchSnapshot();
    wrapper.unmount()
  })

  it('should render correctly <DetailsCostumer /> when is duplicated', () => {
    const wrapper = mount(<DetailsCostumer isDuplicated={true} />)
    expect(wrapper.contains(<label>Code mobile</label>)).toEqual(true)
    wrapper.unmount()
  })

  it('should click send details button', () => {
    const wrapper = mount(<DetailsCostumer isDuplicated={true} />)
    wrapper.instance().handleSendDetails = clickFn

    wrapper.find('button#sendDetails').simulate('keydown', { keyCode: 32 });
    expect(wrapper).toMatchSnapshot();
    wrapper.unmount()
  })

})

Мой компонент:

DetailCustomer.js

export class DetailsCostumer extends Component {

  componentDidUpdate(prevProps) {
    if (this.props.signUpFinished) {
      this.props.history.push('/Signup/EmailConfirmation')
    }
    if (this.props.isDuplicated && (prevProps.isDuplicated !== this.props.isDuplicated)) {
      let userFormToUpdate = { ...this.state.userForm }
      userFormToUpdate['codeMobile'] = {
        value: '',
        validation: {
          required: true
        },
        valid: false,
        touched: false
      }
      this.setState({ formIsValid: false, userForm: userFormToUpdate })
      this.refs.btnRegister.removeAttribute("disabled")
      const domNode = ReactDOM.findDOMNode(this.codeMobileElement)
      domNode.scrollIntoView()
    }
  }

  render() {
    let codeMobile = null
    if (this.props.isDuplicated) {
      codeMobile = (
        <div className="flex-row">
          <label>
            Code mobile
                </label>
          <input min="0"
            type="number"
            name="codeMobile"
            ref={el => this.codeMobileElement = el}
            onChange={this.handleInputs} />
        </div>)
    }

    return (
      <div id="login4" >
        <div className="modal-content">
          <ModalError
            errorMessage={this.props.errorMessage}
            showModal={this.props.error}
            closeModal={this.props.onCloseModalError}
            styleContent={{ backgroundColor: 'gainsboro' }}
            style={{ zIndex: '99999', position: 'absolute', margin: '5% 20%' }} />
          <ModalSuccess
            showModal={this.props.showModalIsDuplicated}
            message={'Please check your phone, we sent a code mobile to confirm your register.'}
            closeModal={this.props.onCloseCodeMobileModal} />
          <button onClick={this.handleCloseDetailConstumer}
            title="Close (Esc)"
            type="button"
            className="mfp-close lb-fechar fa fa-times" />
          <div className="lb-padrao-singup4 mfp-content-login">
            <img src={require('../../../img/logo-lunch-team.svg')} alt="Lunch Team" />
            <h3 className="b">Please provide</h3>
            <div>
              <label>
                First name
                    </label>
              <input className={!this.state.userForm['firstName'].valid && this.state.userForm['firstName'].touched ?
                'Invalid' : null}
                type="text"
                name="firstName"
                onChange={this.handleInputs} />
              <label>
                Last name
                    </label>
              <input className={!this.state.userForm['lastName'].valid && this.state.userForm['lastName'].touched ?
                'Invalid' : null}
                type="text"
                name="lastName"
                onChange={this.handleInputs} />
              <div className="flex-row">
                <label>
                  Mobile
                      </label>
                <input className={!this.state.userForm['mobile'].valid && this.state.userForm['mobile'].touched ?
                  'Invalid' : null}
                  min="0"
                  type="number"
                  name="mobile"
                  onChange={this.handleInputs} />
              </div>
              <div className="flex-row">
                <label>
                  Phone
                      </label>
                <input min="0"
                  type="number"
                  name="phone"
                  onChange={this.handleInputs} />
              </div>
              {codeMobile}
              <div>
                <input style={{ display: 'inline-flex' }}
                  onChange={evt => this.toggleSubscribeCheckbox(evt)}
                  type="checkbox"
                  name="contact"
                  id="contact1" />
                <label htmlFor="delivery1">
                  <b>I would like the day's restaurant list sent to my inbox</b>
                </label>
              </div>
              <div className="m-center">
                <button
                  id="sendDetails"
                  disabled={!this.state.formIsValid}
                  ref="btnRegister"
                  className={!this.state.formIsValid ?
                    'btn orange-bold btn-register btn-disabled' :
                    'btn orange-bold btn-register'}
                  onClick={this.handleSendDetails}>Register</button>
              </div>
            </div>
          </div>
        </div>
      </div>)

  }
}

Результат:

введите описание изображения здесь