Réagir Mocha-chai test ne pas reconnaître magasin de prop

Question

J'ai un test Mocha-chai sur un composant React connecté Redux. Pour passer le magasin Redux au composant de test, je crée dans le fichier de test et de le transmettre comme un accessoire, mais le test jette l'erreur suivante:

Invariant Violation: Could not find "store" in either the context or props of "Connect(Project)". Either wrap the root component in a <Provider>, or explicitly pass "store" as a prop to "Connect(Project)".

Voici le test:

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import { 
    renderIntoDocument, 
    scryRenderedComponentsWithType 
} from 'react-dom/test-utils'; 
import Project from '../../src/components/Project'; 
import { expect } from 'chai'; 
import { createStore } from 'redux'; 
import reducer from '../../src/reducers/reducers'; 

const store = createStore(reducer); 

const component = renderIntoDocument(
    <Project 
    store={ store } 
    project={ 
     { 
     "name": "MyName", 
     "img": "path.jpg", 
     "img_alt": "alt desc", 
     "description": "lorem ipsum", 
     "github": "repository", 
     "link": "website.com" 
     } 
    } /> 
); 

describe('Project',() => { 

    // tests ... 

}); 

Ceci est le composant React:

import React from 'react'; 
import ProjectImage from './ProjectImage'; 
import ProjectText from './ProjectText'; 
import { connect } from 'react-redux'; 
import * as actions from '../actions/actions'; 

export const Project = React.createClass({ 

    getProject: function() { 
    return this.props.project || {}; 
    }, 

    handleClick: function(event) { 
    this.props.dispatch(actions.showModal(true)); 
    this.props.dispatch(
     actions.setModalContent(this.getProject()) 
    ); 
    }, 

    render: function() { 
    return (
     <div className="project"> 

     <ProjectImage 
      img={ this.getProject().img } 
      imgAlt={ this.getProject().img_alt } 
      link={ this.getProject().link } /> 

     <ProjectText 
      projectName={ this.getProject().name } 
      tagline={ this.getProject().tagline } 
      description={ this.getProject.description } 
      github={ this.getProject().github } 
      webLink={ this.getProject().link } 
      openModal={ this.handleClick } /> 

     </div> 
    ); 
    } 

}); 

export default connect()(Project); 

Answer 1

Pourquoi utiliser connect pour Project composant sans mapStateToProps ou mapDispatchToProps fonctions?

Cependant ... Il n'est pas nécessaire de tester le composant enveloppé dans connect. Tout ce dont vous avez besoin est de tester le composant Project.

Comment exporter les deux composants? - Veuillez suivre cette link sur le même numéro.

Answer 2

Pour résoudre ce problème, vous pouvez procéder comme suit.

installer une bibliothèque appelée Redux-maquette magasin npm install redux-mock-store

Mettre en place le magasin comme celui-ci:

import configureStore from 'redux-mock-store'; 

const middlewares = []; 
const mockStore = configureStore(middlewares); 

Ajouter tous les intergiciels que vous souhaitez inclure dans le magasin, par exemple. Redux-thunk, redux-Sagas etc.

Définir votre état initial, et et créer votre magasin comme suit:

initialState = {} 
const store = mockStore(initialState); 

Connectez ensuite votre nouveau magasin à l'appareil que vous testez:

const component = renderIntoDocument(
    <Project 
    store={ store } 
    project={ 
     { 
     "name": "MyName", 
     "img": "path.jpg", 
     "img_alt": "alt desc", 
     "description": "lorem ipsum", 
     "github": "repository", 
     "link": "website.com" 
     } 
    } /> 
); 

describe('Project',() => { 

    // tests ... 

});