Guías de Make it Real
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.
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!
Last modified 3yr ago