Bonus track: Agregar tests

Create React App crea por defecto App.test.js, con un test básico de App.js. Vamos a ejecutar los tests de la siguiente forma:

yarn test a

Vemos que la salida es un error Network request failed. Para resolver esto, vamos a necesitar mockear la llamada al backend.

Instalamos y configuramos las herramientas necesarias para mockear la llamada al backend

Las herramientas que vamos a necesitar son enzyme y su adapter (enzyme-adapter-react-16). Para mockear, una vez que tengamos enzyme, solo será necesario crear nuestro propio fetch e importarlo en nuestros tests. De esta forma, al momento de testear, se utilizará este y no el que viene por defecto.

yarn add --dev enzyme
yarn add --dev enzyme-adapter-react-16

Creamos tests_setup.js en la raíz del proyecto. El contenido del archivo debe ser el siguiente:

import Enzyme, { shallow } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

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

global.shallow = shallow;

Mockeamos el backend

Editamos el archivo tests_setup.js mockeando el fetch de la siguiente manera:

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

global.shallow = shallow;
// ####### Agregar: COMIENZO bloque
const boardsFetch = Promise.resolve({
  json: () => Promise.resolve([{ id: 1, name: 'Board1' }, { id: 2, name: 'Board2' }]),
});

global.fetch = () => boardsFetch;
// ####### Agregar: FIN bloque

Ahora vamos a editar src/App.test.js para que utilice nuestro nuevo fetch. Para ello, reemplazamos su contenido por lo siguiente:

import React from 'react';
import App from './App';
import '../tests_setup';

it('renders without crashing', () => {
  expect(shallow(<App />)).toMatchSnapshot();
});

Volvemos a ejecutar los tests:

yarn test a

Ahora ya no fallan:

Agregar tests para Boards

Vamos a agregar tests para nuestro componente Boards.

Primero vamos a verificar que el estado es seteado correctamente.

Creamos el archivo src/tests/Boards.test.js con el siguiente contenido:

import React from 'react';
import Boards from './../components/Boards';
import '../../tests_setup';

describe('state', () => {
  it('sets right state', () => {
    const wrapper = shallow(<Boards />);
    expect(wrapper.state('boards')).toEqual([]);

    setImmediate(() => {
      expect(wrapper.state('boards')).toEqual([{ id: 1, name: 'Board1' }, { id: 2, name: 'Board2' }]);
    });
  });
})

Ahora, vamos a verificar que se renderizan los componentes correctos. Editamos src/tests/Boards.test.js de la siguiente manera:

  import React from 'react';
  import Boards from './../components/Boards';
  import '../../tests_setup';
+ import BoardTile from './../components/BoardTile';
+ import { MemoryRouter } from 'react-router';

Agregamos el test:

// ####### Agregar: COMIENZO bloque
describe('components rendered', () => {
  let wrapper;
  beforeEach(() => {
    wrapper = mount(
      <MemoryRouter initialEntries={[ '/' ]}>
        <Boards/>
      </MemoryRouter>
    );
  });

  it('renders one BoardTile component for each board', () => {
    expect(wrapper.find(Boards)).toHaveLength(1);

    setImmediate(() => {
      wrapper.update();
      expect(wrapper.find(BoardTile)).toHaveLength(2);
    });
  });
});
// ####### Agregar: FIN bloque

También vamos a necesitar editar tests_setup.js:

- import Enzyme, { shallow } from 'enzyme';
+ import Enzyme, { shallow, mount } from 'enzyme';
  import Adapter from 'enzyme-adapter-react-16';
 	 
  Enzyme.configure({ adapter: new Adapter() });
  global.shallow = shallow;
+ global.mount = mount;

  const boardsFetch = Promise.resolve({
    ...
  })

Ahora corremos los tests nuevamente y vemos que pasan:

Commit en git

git add -A
git commit -m "Testing"

# Agregar el remote si no se hizo antes
git remote add origin https://github.com/wyeworks/react-workshop-2018.git
git fetch origin
# Fin paso opcional

git reset --hard c384cf3