Testing nested components in React

Question

I have some problems with testing events for nested components. This is how my component tree look like:

- ModalComponent (Stateful with value for Input and update handler)
- - ModalType (stateless, passes value and update down to input)
- - - Input (stateless)

I have the value state and the handler for updating my value in my ModalComponent. This information just passed down through ModalType to my Input element via props.

I have tried to mount my ModalComponent with enzyme, find my input and simulate a change on the element. But this did not work.

What is the best strategy to test nested component when the handler and state are n parents components above?

EDIT I have created a lean demo setup of my component in a separate blank react project

class App extends Component {

  state = {
    inputs: {
      machineName: 'Empty'
    }
  }

  onChangeHandler = (e) => {
    let updatedState = null
    console.log(e.target.value, e.target.id);

    switch (e.target.id) {
      case 'machineName':
        updatedState = { ...this.state.inputs, machineName: e.target.value }
        this.setState({inputs: updatedState})
        break;
      default:
        break;
    }
  }

  render() {
    return (
      <div className="App">
        <ModalType onChange={this.onChangeHandler} value={this.state.inputs}></ModalType>
      </div>
    );
  }
}

const ModalType = (props) => {
  return <Input onChange={props.onChange} value={props.value.machineName}></Input>
}

const Input = (props) => (
  <input id="machineName" onChange={props.onChange} value={props.value}></input>
)

My testing script

test('should handle change on input', () =>{
  const wrapper = mount(<App/>)
  wrapper.setState({inputs: { machineName: 'Empty' }})
  wrapper.find('input').simulate('focus')
  wrapper.find('input').simulate('change', {target: {value: '123'}})
  wrapper.update()
  // fails
  expect(wrapper.state().inputs.machineName).toEqual('123')
  // fails too
  expect(wrapper.find('input').props().value).toEqual('123')
  })

Thanks!

Can you provide the sample from your test file ? Accodring to my limited knowledge of Enzyme this should work with something like input.simulate('change', event) — nubinub
– nubinub, Commented Jan 16, 2019 at 16:55

nubinub · Accepted Answer · 2019-01-17 10:45:42Z

2

const wrapper = mount(<ModalComponent />);
const input = wrapper.find('input');
const event  = {target: {value: 'testValue'}};
input.simulate('change', event);

The code above is a working example of how to simulate a change event on your input.

Edit

Your event is not correct. Since your handler is doing something only if the target id is machineName, you need to add that id to your mock event.

wrapper.find('input').simulate('change', {target: {value: '123', id: 'machineName'}})

edited Jan 17, 2019 at 10:45

answered Jan 16, 2019 at 17:00

nubinub

1,9382 gold badges15 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Pommesloch Over a year ago

This is the way that I have tried. And it didn't work for me

nubinub Over a year ago

Looks like you are missing the id in your fake event. I have edited my answer.

Collectives™ on Stack Overflow

Testing nested components in React

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related