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

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

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

import {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): ShallowWrapper {
  return shallow(<PokemonShow {...props} />);
}

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

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

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

    it('persists fetched pokemon to state', async (): Promise<any> => {
      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);
    });
  });
});