Enzyme mount wrapper is empty after simulate('click') in ReactApp

Question

I'm trying to test a registration component that has a Vertical Stepper with Jest/Enzyme and I keep hitting a wall when trying to simulate the user clicking "Next" .

• expected behavior is to do nothing if the "Required" input fields are empty, however after doing the .simulate('click') following assertions fail with not finding any html in the wrapper.

The component is passed through react-redux connect() so I don't know if that would be related.

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
})

Same outcome regardless of the element I'm looking up.

Any suggestions will be greatly appreciated.

Answer 1

You need to update. So you would change it:

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
});

Then the test should work as you intend.