React Mocha-Chai-Test nicht erkennen Shop von Prop

Question

Ich habe einen Mocha-Chai-Test auf einem Redux verbunden React-Komponente. Um die Redux Speicher an die Testkomponente zu passieren, ich schaffe es in der Testdatei und geben sie als Stütze, aber der Test führt den folgenden Fehler:

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)".

Hier ist der 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 ... 

}); 

Dies ist die Komponente Reagieren:

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

Warum verwenden Sie connect für Project Komponente ohne mapStateToProps oder mapDispatchToProps Funktionen?

Allerdings ... Es ist nicht notwendig, umwickelte Komponente in connect zu testen. Alles, was Sie brauchen, ist Test Plain Project Komponente.

Wie exportiert man beide Komponenten? - Bitte folgen Sie dieser link zum gleichen Thema.

Answer 2

Um dieses Problem zu beheben, können Sie Folgendes tun:

Bibliothek installieren redux-Mock-store npm install redux-mock-store

den Laden wie das Set up genannt:

import configureStore from 'redux-mock-store'; 

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

alle Middle hinzufügen Sie im Speicher aufgenommen werden sollen, zum Beispiel. redux-Thunk, redux-Sagas usw.

Definieren Sie Ihren Ausgangszustand, und und Ihr Geschäft wie folgt erstellen:

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

Dann verbinden Sie Ihren neuen Speicher an die Komponente, die Sie testen:

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 ... 

});