reactjs - reduccion - dispatch(acción) no actualiza inmediatamente el estado de reducción en pruebas unitarias

reacciones redox ejemplos

Question

Estoy escribiendo casos de prueba para mis bases de aplicación en reaccionar y reducir.

container = TestUtils.renderIntoDocument(
  <Provider store={createStore({"key": "old_val"})}>
    {() => <Component />}
  </Provider>
);

Después de renderizar con initialState , envío una acción y veo si el estado cambia.

Component.store.dispatch({ type: ''SET_VAL'', value: ''some_val'' });

Luego imprimo el estado

console.log(store.getState());

Espero que el estado sea {"key": "some_val"} . Sin embargo, todavía muestra {"key": "old_val"} .

La aplicación funciona bien, simplemente no es la prueba, por lo que no puede haber ningún problema con mis action-creators o reducers .

¿Estoy haciendo algo mal aquí? Por cierto, estoy usando thunk middleware para el envío de acción asíncrona. ¿Eso interfiere aquí? En caso afirmativo, ¿cómo espero hasta que se complete la acción asíncrona?

Actualizar:

Las pruebas de reducción que se muestran aquí son bastante sencillas, pero parecen funcionar bien.

store.dispatch(addTodo(''Hello''));
expect(store.getState()).toEqual([{
  id: 1,
  text: ''Hello''
}]);

Answer 1

Una de las grandes ventajas de redux es que le permite implementar casi toda su aplicación utilizando funciones puras y componentes puros. Redux y react-redux resumen los detalles de implementación de la IU de suscripción a los cambios de estado, lo que le permite probar todo el código de su aplicación de forma aislada. De esta forma, no necesita renderizar un proveedor con una tienda cada vez que quiera probar su código, que es una reducción importante de la complejidad.

Supongamos que tiene una propiedad key en su estado y un componente KeyDisplay . Puede implementar el estado con el siguiente archivo reductor:

reducrs.js

import { combineReducers } from ''redux'';

export function key(state, { type, value }) {
  switch(type) {
    case ''SET_VAL'': return value;
    default: return state;
  }
}

export default combineReducers({ key });

Y puede configurar un archivo para nuestro componente:

KeyDisplay.js

import React from ''react'';
import { connect } from ''react-redux'';

export function KeyDisplay({ keyProp }) {
  return (
    <div>The key is {keyProp}</div>
  );
}

export default connect((state) => { keyProp: state.key })(KeyDisplay);

Luego, en la prueba unitaria para la reducción, puede importar solo el reductor para key y probarlo por separado de la interfaz de usuario:

keyReducer.test.js

import test from ''tape'';
import { key } from ''./reducers.js'';

test(''key reducer'', (t) => {
  t.plan(1);
  const output = key(''old'', { type: ''SET_VAL'', value: ''new'' });
  t.equal(output, ''new'', ''SET_VAL should override old value'');
});

Además, dado que connect pasa state como props en el componente, puede procesar el componente connect sin connect con algunos accesorios de prueba que representan un estado que le interesa, nuevamente sin configurar una tienda y un proveedor:

KeyDisplay.test.js

import test from ''tape'';
import { renderIntoDocument } from ''react-addons-test-utils'';
import { KeyDisplay } from ''./KeyDisplay.js'';

test(''KeyDisplay'', (t) => {
  const component = renderIntoDocument(<KeyDisplay keyProp="test" />);
  // test component
});