Testing with Jest: Tip #10

Input-test.jsx

import renderer from 'react-test-renderer'
import Input from '../Input'

it('should render correctly', () => {
  const component = renderer.create(<Input />)
  expect(component.toJSON()).toMatchSnapshot()

  // getInstance is returning the `this` object you have in your component
  // meaning anything accessible on `this` inside your component
  // can be accessed on getInstance, including props!
  const instance = component.getInstance()
  expect(instance.state).toMatchSnapshot('initial state')

  instance.handleChange({ target: { value: '[email protected]' } })
  expect(instance.state).toMatchSnapshot('updated state')
})

Input.jsx

import { Component } from 'react'

export default class Input extends Component {
  state = { value: '' }

  handleChange = event => this.setState({ value: event.target.value })

  render() {
    return (
      <div>
        <label>Email</label>
        <input
          type="email"
          onChange={this.handleChange}
          value={this.state.value}
        />
      </div>
    )
  }
}