Testando com Jest: Dica #13

Canvas-test.jsx

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

it('should render correctly', () => {
  const component = renderer.create(<Form x={0} y={0} />)
  expect(component.toJSON()).toMatchSnapshot()

  const instance = component.getInstance()
  const spy = jest.spyOn(instance, 'calculateGrid')

  // shouldComponentUpdate deve evitar que o "render" seja chamando e "calculateGrid" não deve ser chamado
  component.update(<Form x={0} y={0} />)
  expect(spy).not.toHaveBeenCalled()

  // agora "calculateGrid" deve ser chamado, já que X e Y possuem novos valores
  component.update(<Form x={2} y={2} />)
  expect(spy).not.toHaveBeenCalled()
})

Canvas.jsx

import { Component } from 'react'

export default class Canvas extends Component {
  calculateGrid = () => {
    /* método expensivo chamado durante "render" */
  }

  shouldComponentUpdate({ x: nextX, y: nextY }) {
    const { x: prevX, y: prevY } = this.props
    return prevX !== nextX || prevY !== nextY
  }

  render() {
    /* típica lógica para renderizaço do seu componente */
  }
}