Testando com Jest: Dica #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 está retornando o objeto `this` que você tem no seu componente
  // significando que todos os métodos que você tem no seu componente, podem ser
  // acesso aqui, incluindo 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>
    )
  }
}