Method “simulate” is only meant to be run on a single node. 0 found instead

Question

i am learning enzyme with react but i am facing this problem can any one help me out . i am trying to test register page on change username and password but i having this issue

//RegisterPage.js

import React from 'react'
import { Component } from 'react';
import { Link } from 'react-router-dom';
import { connect } from 'react-redux';
import { userActions } from '../actions';

export class RegisterPage extends Component {
constructor(props) {
    super(props);

    this.state = {
        user: {
            username: '',
            password: ''
        },
        submitted: false
    };

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
}
    handleChange(event) {
    const { name, value } = event.target;
    const { user } = this.state;
    this.setState({
        user: {
            ...user,
            [name]: value
        }
    });
}

handleSubmit(event) {
    event.preventDefault();
    // handle button click and dispatch register
    const { user } = this.state;
    if (user.username && user.password) {
        this.props.dispatch(userActions.register(user))
    }else{
     this.setState({submitted:true})   
    }
}

render() {
    const { user, submitted } = this.state;
    const { registering  } = this.props;
    return (
        <div className="col-md-6 col-md-offset-3">
            <h2>Register</h2>
            <form name="form"  onSubmit={this.handleSubmit}>
                <div className={'form-group' + (submitted && !user.username ? ' has-error' : '')}>
                    <label htmlFor="username">Username</label>
                    <input value={user.username} onChange={this.handleChange} type="text" className="form-control username" name="username" />
                    {submitted && !user.username &&
                        <div className="help-block">Username is required</div>
                    }
                </div>
                <div className={'form-group' + (submitted && !user.password ? ' has-error' : '')}>
                    <label htmlFor="password">Password</label>
                    <input value={user.password} onChange={this.handleChange} type="password" className="form-control" name="password"/>
                    {submitted && !user.password &&
                        <div className="help-block">Password is required</div>
                    }
                </div>
                <div className="form-group">
                    <button className="btn btn-primary">Register</button>
                    <Link to="/login" className="btn btn-link">Cancel</Link>
                </div>
            </form>
        </div>
    );
}
}
function mapStateToProps(state) {
return {
    ...state
}
RegisterPage=connect(mapStateToProps)(RegisterPage)
export default RegisterPage;

here is my test case which i have written i am new on enzyme so no idea about this how this will work //RegisterPage.test.jsenter image description here

import React from 'react';
import ReactDOM from 'react-dom';
import expect from 'expect';
import TestRegisterPage from '../components/RegisterPage';
import { App } from '../App';
import { configure } from 'enzyme';
import { Link } from 'react-router-dom';
import { MemoryRouter } from 'react-router'
import Adapter from 'enzyme-adapter-react-16';
import { mount, shallow } from 'enzyme';
import { PropTypes } from 'prop-types';
import renderer from 'react-test-renderer';
import {spy} from 'sinon';
import { Provider } from 'react-redux';
import { store } from '../helpers';
import configureStore from 'redux-mock-store';

const middlewares = [];
const mockStore = configureStore(middlewares);
configure({ adapter: new Adapter() });
let mockedStore = mockStore({});
export const CustomProvider = ({ children }) => {
  return (
    <Provider store={store}>
      <MemoryRouter>
        {children}
      </MemoryRouter>
    </Provider>
  );
};

describe("Test RegisterPage component", () => {
  it('check route, dispatch and store setup for component', () => {
    const wrapper = mount(
      <CustomProvider>
        <TestRegisterPage dispatch={spy()} />
      </CustomProvider>
      {
        context: {store: mockedStore},
        childContextTypes: {store: PropTypes.object.isRequired}
      }
    );

    const inst = wrapper.children();
    let uname = inst.find('.username');
    let pwd = inst.find('.password');
    uname.simulate('change', { target: { value: "demo_username" } });
    pwd.simulate('change', { target: { value: "demo_password" } });
    wrapper.update();
    expect(wrapper).toBeTruthy();
  });
});

Answer 1

You can get the input via name selectors, without getting the children:

let uname = wrapper.find('input[name="username"]');
let pwd =  wrapper.find('input[name="password"]');

uname.simulate('change',{ target: {value: "demo_username"} });
pwd.simulate('change', { target: { value: "demo_password" } });