reactjs - switch - redux-thunk

Cómo pasar a la tienda explícitamente como prop para "Conectar()"

Question

Estoy tratando de probar mi componente React y obtengo el siguiente error.

Violación invariante: no se pudo encontrar "almacén" en el contexto ni en los accesorios de "Conectar ()". Envuelva el componente raíz en un <Provider>, o pase explícitamente "store" como prop para "Connect ()".

El error se produce al renderizar el componente en la prueba.

beforeEach(() => {
  Component = TestUtils.renderIntoDocument(<SideMenu />);
});

Funciona bien cuando se renderiza el componente en la página. Sin embargo, en la prueba, no puedo pasar la tienda explícitamente al Componente.

¿Puede alguien apuntar en la dirección correcta?

Answer 1

En la mayoría de los casos, encontré que la importación de componentes en las pruebas funciona bien para mí.

SideMenu.js:

export class SideMenu extends React.Component {
 // implementation
}

export default connect(mapStateToProps,)(SideMenu)

SideMenu.spec.js:

import { SideMenu } from ''path/to/SideMenu.js''

const props = {
  // provide all necessary stubs and mocks for redux props and actions 
}
component = TestUtils.renderIntoDocument(<SideMenu {...props} />);

Nota: como señaló Салман, este enfoque no funcionará cuando haya otro componente secundario en la línea, que espera la store .

Answer 2

Para responder a la pregunta (me encontré con esto y la respuesta aceptada no es lo que necesitaba), cree un nuevo método como:

function connectWithStore(store, WrappedComponent, ...args) {
  let ConnectedWrappedComponent = connect(...args)(WrappedComponent)
  return function (props) {
    return <ConnectedWrappedComponent {...props} store={store} />
  }
}

Luego, para conectar, usa:

const ConnectedApp = connectWithStore(store, App, mapStateToProps, mapDispatchToProps,)

export default ConnectedApp;

Consulte aquí: github.com/reactjs/react-redux/issues/…

Answer 3

connect es un decorador proporcionado por react-redux . Un componente connect a redux es un componente inteligente y espera que la tienda esté disponible a través de un prop o como dice el mensaje de error a través de un Provider .

Mientras prueba un componente inteligente, puede suministrar una tienda simulada como prop . Sin embargo, cuando hay otro componente secundario en la línea, quien espera la store , la forma de prop no funcionará.

Aquí hay una manera de suministrar la store a un componente que import un componente hijo que se suscribe a la store .

const initialState = {key: ''value''};
const store = createStore(initialState);

component = TestUtils.renderIntoDocument(
  <Provider store={store(initialState)}>
    {() => <SideMenu />}
  </Provider>
);