react-router-testing-tutorial.js

import React from 'react';
import { shallow, mount } from 'enzyme';
import { MemoryRouter } from 'react-router-dom';
import App from './App';
import Home from './Home';
import Creatures from './Creatures';
import CreatureDetails from './CreatureDetails';

import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

configure({ adapter: new Adapter() });

describe('Routes', () => {
  
  it('should show Home component for / router', () => {
    const wrapper = mount(
      <MemoryRouter initialEntries={['/']}>
        <App />
      </MemoryRouter>
    )

    expect(wrapper.find(Home)).toHaveLength(1)
  })

  it('should show Unicorns component for /unicorns router', () => {
    const wrapper = mount(
      <MemoryRouter initialEntries={['/unicorns']}>
        <App />
      </MemoryRouter>
    )
    const creaturesComponent = wrapper.find(Creatures)
    const creaturesType = creaturesComponent.props().type
    
    expect(wrapper.find(Creatures)).toHaveLength(1);
    expect(creaturesType).toEqual('unicorns');

  })

  it('should show Sharks component for /sharks router', () => {
    const wrapper = mount(
      <MemoryRouter initialEntries={['/sharks']}>
        <App />
      </MemoryRouter>
    )

    const creaturesComponent = wrapper.find(Creatures)
    const creaturesType = creaturesComponent.props().type;
    expect(wrapper.find(Creatures)).toHaveLength(1);
    expect(creaturesType).toEqual('sharks')
  })

  it('should show Puppies component for /puppies router', () => {
    const wrapper = mount(
      <MemoryRouter initialEntries={['/puppies']}>
        <App />
      </MemoryRouter>
    )

    const creaturesComponent = wrapper.find(Creatures)
    const creaturesType = creaturesComponent.props().type;
    expect(wrapper.find(Creatures)).toHaveLength(1);
    expect(creaturesType).toEqual('puppies')
  })



  it('should show Dolphins component for /dolphins router', () => {
    const wrapper = mount(
      <MemoryRouter initialEntries={['/dolphins']}>
        <App />
      </MemoryRouter>
    )

    const creaturesComponent = wrapper.find(Creatures)
    const creaturesType = creaturesComponent.props().type;
    expect(wrapper.find(Creatures)).toHaveLength(1);
    expect(creaturesType).toEqual('dolphins')
  })

  it('should show CreatureDetails component for specific creature router', () => {
    const wrapper = mount(
      <MemoryRouter initialEntries={['/unicorns/1']}>
        <App />
      </MemoryRouter>
    )

    const creatureDetailsComponent = wrapper.find(CreatureDetails);
    const creatureID = creatureDetailsComponent.props().id
    expect(creatureDetailsComponent).toHaveLength(1);
    expect(creatureID).toEqual(1)
  })
})