Обертка для ферментного монтирования пуста после имитации ('click') в ReactApp - PullRequest
Новая
       6

Обертка для ферментного монтирования пуста после имитации ('click') в ReactApp

2 голосов
/ 17 января 2020

Я пытаюсь протестировать компонент регистрации, который имеет вертикальный степпер с Jest / Enzyme, и продолжаю бить стену, когда пытаюсь симулировать пользователя, нажимающего «Далее».

  • ожидаемое поведение ничего не делать, если поля ввода «Обязательные» не заполнены, однако после выполнения операции .simulate ('click') следующие утверждения не могут быть найдены html в обертке. прошло черезact-redux connect (), поэтому я не знаю, будет ли это связано.

    UserRegistration. js

    import React from 'react';
import { connect } from 'react-redux';
import Stepper from '@material-ui/core/Stepper';
import Step from '@material-ui/core/Step;
import StepLabel from '@material-ui/core/StepLabel;
import StepContent from '@material-ui/core/StepContent'

class UserRegistration extends React.Component {
 constructor(props){
  this.state = {
   activeStep: 0,
   inputData: {},
   ...
  }
 }

 getStepContent = () => {
  switch(this.state.activeStep)
   case '...':
    return 
    (<>
     <input test-data="firstName"/>
     ...
     </>);
   ...
 }

 render () {
  const steps = ['Personal Info', 'Corporate Details', ...]

  return (
   <Stepper activeStep={this.state.activeStep} orientation="vertical">
    {steps.map((label, index) => {
      return (
       <Step key={index}/>
       <StepLabel>{label}</StepLabel>
       <StepContent>
       {this.getStepContent()}
       <button data-test="btn-next" onClick={() => this.goNext()}> NEXT </button>
       <button onClick={() => this.goBack()}> BACK </button> 
      )
     }
    }
   </Stepper>
  ) 
 }
}

const mapStateToProps = () => {...}
const mapDispatchToProps = () => {...}

export default connect(mapStateToProps, mapDispatchToProps)(UserRegistration)

    UserRegistration .test. js

    const wrapper = mount(
<Provider store={store}
 <UserCreate/>
</Provider>
)

it('Confirm REQUIRED fields rendered', () => {
 expect(wrapper.find("input[data-test='firstName']").length).toEqual(1);
 // PASS
});

it('Check if still on same step clicked NEXT with no user data', () => {
 wrapper.find("button[data-test='btn-next']").simulate('click');
 expect(wrapper.find("input[data-test='firstName']").length).toEqual(1); 
 // Expected value to equal: 1, Received: 0
})

    Тот же результат, независимо от элемента, который я ищу.

    Любые предложения будут высоко оценены.

1 Ответ

1 голос
/ 17 января 2020

Вам нужно обновить. Таким образом, вы изменили бы его: 

it('Check if still on same step clicked NEXT with no user data', () => {
  wrapper.find("button[data-test='btn-next']").simulate('click');
  // Add this line
  wrapper.update();

  const button = wrapper.find("input[data-test='firstName']");
  expect(button.length).toEqual(1); 
  // Expected value to equal: 1, Received: 0
});

Тогда тест должен работать так, как вы собираетесь.

...