web-dev-qa-db-fra.com

Comment passer explicitement du magasin en tant que prop à "Connect ()"

J'essaie de tester mon composant React et d'obtenir l'erreur suivante.

Violation invariante: Impossible de trouver "magasin" dans le contexte ou les accessoires de "Connect ()". Enveloppez le composant racine dans un <Fournisseur> ou passez explicitement "magasin" en tant que prop à "Connect ()".

L'erreur survient lors du rendu du composant dans le test.

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

Cela fonctionne bien lors du rendu du composant sur la page. Cependant, en test, je ne parviens pas à transférer explicitement le magasin dans le composant.

Quelqu'un peut-il indiquer la bonne direction?

reactjsphantomjsreduxreact-redux
17
Salman

connect est un décorateur fourni par react-redux. Un composant connected to redux est un composant intelligent et s'attend à ce que le magasin soit disponible via prop ou comme le message d'erreur le dit via Provider.

Lors du test d'un composant intelligent, vous pouvez fournir un magasin modélisé sous la forme d'une prop. Cependant, quand il y a un autre composant enfant sur la ligne, qui attend la store, la manière prop ne fonctionnera pas.

Voici un moyen de fournir la store à un composant qui imports un composant enfant qui s'abonne à la store.

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

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

Pour répondre à la question (j'ai rencontré ceci et la réponse acceptée n'est pas ce dont j'avais besoin), créez une nouvelle méthode telle que:

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

Ensuite, pour vous connecter, utilisez:

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

export default ConnectedApp;

Voir ici: https://github.com/reactjs/react-redux/issues/390#issuecomment-221389608

3
mikeb

Dans la plupart des cas, j’ai constaté que l’importation d’un composant dans les tests me convenait parfaitement. 

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} />);

Remarque: comme Салман l'a fait remarquer, cette approche ne fonctionnera pas s'il existe un autre composant enfant sur toute la ligne, qui attend la store.

1
Yevgen Safronov