react-testing-library.js

// utils/testing-library.js
// Set up a custom renderer for @testing-library/react

import { render as originalRender } from '@testing-library/react'
import diff from 'jest-diff'
import chalk from 'chalk'

const render = (...args) => {
  const rendered = originalRender(...args)

  rendered.lastFragment = new DocumentFragment()

  rendered.debugDiff = () => {
    const nextFragment = rendered.asFragment()

    console.log(
      diff(rendered.lastFragment, nextFragment, {
        aAnnotation: 'Previous',
        bAnnotation: 'Next',
        aColor: chalk.red,
        bColor: chalk.green,
      })
    )

    rendered.lastFragment = nextFragment
  }
  return rendered
}

export * from '@testing-library/react'
export { render }

test-sample.js

import { render, fireEvent } from './react-testing-library'

// Usage
// `render` now has a `debugDiff` method that shows how the
// rendered fragement changes over time

test('shows fragment changes over time', () => {
  const rendered = render(<App />)
                      
  // First call shows the initial fragment
  rendered.debugDiff()
                          
  const input = rendered.getByPlaceholderText('Search...')
  fireEvent.change(input, { target: { value: 'Foo!' } })
  
  // Shows changes since the last diff
  rendered.debugDiff()
})