Testing

Search…
Testing
Cuando estás probando tus aplicaciones de React debes tener en cuenta lo siguiente:
1.
Probar los componentes presentacionales de forma aislada (sin Redux).
2.
Probar los componentes conectados utilizando un mock del store. Un mock es un objeto que simula ser otro objeto.
3.
Probar las funciones reductoras.
4.
Probar los actions creators.
El primer punto está en el módulo de React, así que nos vamos a concentrar en los otros tres.
Probando los componentes conectados
Los componentes conectados de Redux reciben el store como prop, así que podemos crear un mock del store y pasárselo. Para eso vamos a utilizar una librería llamada redux-mock-store.
1
# npm
2
npm install --save-dev redux-mock-store
3
​
4
# yarn
5
yarn add redux-mock-store --dev
Copied!
Ahora creemos una prueba de un componente conectado:
1
import React from "react";
2
import { render } from "enzyme";
3
import configureStore from "redux-mock-store";
4
import TaskList from "./TaskList";
5
​
6
const mockStore = configureStore();
7
​
8
it("renders no tasks when store is empty", () => {
9
  const store = mockStore({ tasks: [] });
10
​
11
  const wrapper = render(<TaskList store={store} />);
12
  expect(wrapper.find('.task').length).toBe(0);
13
});
Copied!
El siguiente video muestra lo que acabamos de hacer en más detalle.
Probando las funciones constructoras
El primer paso para poder probar las funciones constructoras es moverlas a un archivo independiente, por ejemplo en un archivo reducers.js:
1
const tasks = (state=[], action) {
2
  // ...
3
};
4
​
5
const users = (state=[], action) {
6
  // ...
7
}
8
​
9
export { tasks, users };
Copied!
Ahora, en el store debemos importarlas:
1
import { createStore, combineReducers } from "redux";
2
import * as reducers from "./reducers";
3
​
4
export default createStore(combineReducers(reducers));
Copied!
La forma de probar las funciones constructoras es invocándolas con diferentes estados iniciales y diferentes acciones para verificar que los nuevos estados sean los esperados:
1
import { tasks, users } from "./reducers";
2
​
3
describe("tasks", () => {
4
  it("returns the initial state", () => {
5
    expect(tasks(undefined, {})).toEqual([]);
6
  });
7
​
8
  it("adds a task", () => {
9
    const task = { id: 1, name: "test" };
10
    const action = { type: "NEW_TASK", task: task };
11
    expect(tasks([], action)).toContainEqual(expect.objectContaining(task));
12
  });
13
​
14
  // more tests
15
});
16
​
17
// more tests
Copied!
Probando los action creators
La forma más fácil de probar los action creators es invocarlos y verificar que devuelvan la acción que esperamos. Por ejemplo:
1
import { newTask } from "./actionCreators";
2
​
3
it("creates the new task action", () => {
4
  const action = newTask({ id: 1, name: "test" });
5
  expect(action).not.toBeNull();
6
  expect(action.type).toBe("NEW_TASK");
7
  expect(action.product).not.toBeNull();
8
});
Copied!
Para conocer otra forma y probar action creators con redux-thunk mira el siguiente video:
Combinando funciones reductoras
Algoritmos
Last modified 3yr ago
Copy link
Contents
Probando los componentes conectados
Probando las funciones constructoras
Probando los action creators