javascript - actions - Cómo acercarse a TDD al escribir React/Redux

react js

Question

Estoy escribiendo una aplicación React / Redux, usando TDD. La pregunta es cómo abordar los primeros pasos al escribir nuevas aplicaciones, dado todo el modelo que quiero usar.

De acuerdo con TDD, debo escribir solo el código mínimo para aprobar mi prueba, y solo luego refactorizar. ¿Debo comenzar sin Redux, por ejemplo, y luego refactorizar e introducir Redux? Voy a tener una refactorización bastante grande, teniendo en cuenta la repetición de Redux (elementos de tiendas / reductores / envoltorios, etc.)

Entiendo las enormes ventajas del enfoque TDD. La pregunta es si un mejor enfoque será "permitir" usar más que el conjunto mínimo de código para pasar una prueba, en esos casos ...

Answer 1

Mi forma preferida es probar primero la reacción y comprobar si el componente se representa correctamente en función de los apoyos que se le suministran.

algo como esto:

import {App} from ''../../src/containers/App'';
import React from ''react'';
import ReactDOM from ''react-dom'';
import {
  renderIntoDocument,
  scryRenderedDOMComponentsWithTag
} from ''react-addons-test-utils'';
import {expect} from ''chai'';

describe(''Main page'',() => {
  it(''should show a sign-in page if isAuthenticated is false'',() => {
    const component = renderIntoDocument(
      <App isAuthenticated={false}/>
    );

    const buttons = scryRenderedDOMComponentsWithTag(component,''button'')

    expect(buttons.length).to.be.equal(1)

  });

  it(''should show a welcome text if isAuthenticated is true'',() => {
    const component = renderIntoDocument(
      <App isAuthenticated={true}/>
    );
    const text = scryRenderedDOMComponentsWithTag(component,''h1'')
    expect(text).to.have.string(''welcome'')
  })
})

Luego agregaría pruebas para redux para verificar si el estado cambia en función de la entrada proporcionada a los reductores.

es una cuestión de preferencia al final.

Answer 2

Redux no interferirá con su capacidad para escribir el código mínimo para aprobar cada prueba individual.

Sus componentes React individuales simplemente están tomando puntales y haciendo / mostrando algo. Las pruebas de la unidad para esos componentes no deberían importar si esos accesorios se pasan de la manera estándar de React o si se insertan a través de react-redux. Por lo tanto, la presencia de Redux no afectará su capacidad para pasar pruebas de componentes React con un código mínimo.

Existen algunas excepciones menores, como mover el estado del componente al estado de Redux, o cambiar la forma en que se manejan los efectos secundarios (por ejemplo, recuperar datos de una API). Esos tipos de cambios pueden requerir algunos cambios en sus pruebas, pero es probable que los hagan más simples, en todo caso.

Por supuesto, si agrega Redux, tendrá que escribir pruebas para los nuevos reductores / creadores / selectores de acción de Redux, etc., pero escribir esas pruebas es muy directo. No va a duplicar ningún trabajo: la cantidad de tiempo que dedique a escribir pruebas será casi igual independientemente de si comienza con o sin Redux.

En cuanto al concepto general de comenzar con o sin Redux: Dan Abramov, quien creó Redux, recomienda comenzar con React puro y luego solo agregar Redux por el camino si es que lo necesita.