React Component testing examples with Mocha, expect and React-Test-Utils

mocha-react.test.js

import React from 'react'
import ShallowRenderer from 'react-test-renderer/shallow'
import expect from 'expect'
import expectJSX from 'expect-jsx'

expect.extend(expectJSX)


// Component
const Greeting = ({greeting}) => (
  <main className="greeting-wrap">
    <p>Greeting</p>
    <h1>{greeting}</h1>
  </main>
)

describe('Greeting', () => {
  let greeting

  beforeEach(() => {
    const renderer = new ShallowRenderer()
    renderer.render(<Greeting greeting="Hello World!" />)

    greeting = renderer.getRenderOutput()
  })

  it('should be the correct element type', () => {
    expect(greeting.type).toBe('main')
  })

  it('should render the correct greeting message', () => {
    expect(greeting).toIncludeJSX(<h1>Hello World!</h1>)
  })
  
  it('should have the right class', () => {
    expect(greeting.props.className).toMatch(/greeting-wrap/)
  })
})