pokemon.trade/spec/javascript/frontend/components/pages/pokemon/show.test.tsx

import * as React from 'react';
import {shallow, mount} from 'enzyme';

import PokemonShow from 'packs/frontend/components/pages/pokemon/show';
import {instance} from 'packs/frontend/api';

import {Route, StaticRouter} from 'react-router-dom';
import MockAdapter from 'axios-mock-adapter';

const defaultProps = {
  match: {
    params: {
      id: 1,
    },
    url: '/pokemon/show/1',
    path: '',
    isExact: false,
  },
  location: {} as any,
  history: {} as any,
  pokemon: {},
};

function setup(props = defaultProps) {
  return shallow(<PokemonShow {...props} />);
}

function mountSetup(props = defaultProps) {
  return mount(
    <StaticRouter>
      <PokemonShow {...props} />
    </StaticRouter>
  );
}

describe('<PokemonShow />', () => {
  it('sets default state', () => {
    const wrapper = setup();
    expect(wrapper.state('pokemon')).toEqual({id: null, nickname: null});
  });

  describe('componentDidMount()', () => {
    let mock;
    beforeEach(() => {
      mock = new MockAdapter(instance);
    });
    afterEach(() => {
      mock.restore();
    });

    it('persists fetched pokemon to state', async () => {
      const mockData = {
        id: 1,
        nickname: 'Bulbasaur',
      };
      mock.onGet(`/api/v1/pokemon/${mockData.id}`).reply(200, mockData);

      const wrapper = mountSetup();
      const component = wrapper.find(PokemonShow);

      await component.instance().componentDidMount();

      expect(component.state('pokemon')).toEqual(mockData);
    });
  });
});