stipsan

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

jest.mock('react-router-dom', () => ({
  Link: 'Link',
  Route: ({ children, path }) => children({ match: path === '/somewhere' })
}))

it('should render correctly', () => {
  const component = renderer.create(<Sidebar />)

stipsan

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

jest.mock('react-select', () => {
  const { createElement } = require('react')
  // Note that since 'react-select' is mocked we have to use
  // require.requireActual, even inside the factory function that mocks it!
  // Just watch the movie Inception and skip to the Dream within a Dream and you'll get it
  const ReactSelect = require.requireActual('react-select')

stipsan

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

jest.mock('react-router-dom', () => ({
  Link: 'Link',
  Route: ({ children, ...props }) =>
    typeof children === 'function'
      ? children({ match: path === '/somewhere' })
      : createElement('Route', props)
}))

stipsan

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

// Generated snapshot is exactly like the previous example
// while it's possible to override the default mock
// by using the same jest.mock command as before
// if this test need a different behavior than the
// glboal mock.

it('should render correctly', () => {

stipsan

{
  "jest": {
    "setupFiles": [
      "<rootDir>/test-setup.js"
    ]
  }
}

stipsan

{
  "jest": {
    "setupFiles": [
      "<rootDir>/test-setup.js"
    ]
  }
}

stipsan

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!

stipsan

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

// we can just pass through the component since we pass dispatch prop directly
jest.mock('react-redux', () => component => component)

it('should render correctly', () => {
  const dispatch = jest.fn()
  const component = renderer.create(
    <NotificationsContainer dispatch={dispatch} />

stipsan

import renderer from 'react-test-renderer'
import Form, { validate } from '../Form'

jest.mock('redux-form', () => ({
  Field: 'Field',
  reduxForm: options => {
    // Wrap the component and return the new component, just like the real hoc does
    return Form => props => {
      // call the validate error to make sure errors are detected
      options.validate({}, props)

stipsan

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')