1

Trying to test onChange function like this, but getting target as undefined.

Login.js

  handleInputChange = e => {
    this.setState({
      [e.target.name]: e.target.value
    });
  };

<Input
   type="email"
   name="email"
   onChange={this.handleInputChange}
   defaultValue={this.state.email}
  />

Login.test.js

      it("test input onChange function", () => {
        const wrapper = shallow(<Login store={store}/>).dive();
        wrapper.find('Input').at(1).simulate('change', { target: { name: 'width', value: 50 } });
        wrapper.update();
        expect(wrapper.find("Input").at(1).props().value).toEqual(50);
      });
1
  • your component is not fully controlled and you are not passing value prop. Check this reactjs.org/docs/uncontrolled-components.html . Easiest way is to convert it into controlled(just rename defaultValue prop t o be value), but I'm not sure why this component is uncontrolled Commented Jan 18, 2020 at 10:53

1 Answer 1

1

You'd better use Controlled Components rather than Uncontrolled Components.

For controlled components, the test is:

login.jsx:

import React, { Component } from 'react';
import { connect } from 'react-redux';

const Input = (props) => <input {...props} />;

class Login extends Component {
  constructor() {
    this.state = {
      email: 0,
      username: 0,
    };
  }
  handleInputChange = (e) => {
    this.setState({
      [e.target.name]: e.target.value,
    });
  };

  render() {
    return (
      <div>
        <Input type="text" name="username" onChange={this.handleInputChange} value={this.state.username} />;
        <Input type="email" name="email" onChange={this.handleInputChange} value={this.state.email} />;
      </div>
    );
  }
}

export default connect()(Login);

login.test.jsx:

import Login from './login';
import { shallow } from 'enzyme';
import configureMockStore from 'redux-mock-store';

const mockStore = configureMockStore();

describe('59799196', () => {
  it('test input onChange function', () => {
    const store = mockStore({});
    const wrapper = shallow(<Login store={store} />).dive();
    wrapper
      .find('Input')
      .at(1)
      .simulate('change', { target: { name: 'email', value: 50 } });
    wrapper.update();
    expect(
      wrapper
        .find('Input')
        .at(1)
        .props().value,
    ).toEqual(50);
  });
});

Unit test results with 100% coverage:

 PASS  src/stackoverflow/59799196/login.test.jsx
  59799196
    ✓ test input onChange function (19ms)

-----------|----------|----------|----------|----------|-------------------|
File       |  % Stmts | % Branch |  % Funcs |  % Lines | Uncovered Line #s |
-----------|----------|----------|----------|----------|-------------------|
All files  |    92.86 |      100 |       80 |      100 |                   |
 login.jsx |    92.86 |      100 |       80 |      100 |                   |
-----------|----------|----------|----------|----------|-------------------|
Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        5.857s, estimated 11s

Source code: https://github.com/mrdulin/jest-codelab/tree/master/src/stackoverflow/59799196

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

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.