React Mocha-chaiテストが小売店から店舗を認識しない

Question

Redux接続のReactコンポーネントでMocha-chaiテストを行っています。テストコンポーネントにReduxのストアを通過するために、私は、テストファイルで作成し、小道具として渡したが、試験は、次のエラーをスロー：ここ

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

試験である：

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

}); 

これが反応コンポーネントです：

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

あなたがmapStateToPropsまたはmapDispatchToProps機能なしProjectコンポーネントにconnectを使うのはなぜ？

ただし、ラップされたコンポーネントをconnectにテストする必要はありません。 必要なのは、テストプレーンProjectコンポーネントです。

両方のコンポーネントをエクスポートするにはどうすればよいですか？ - 同じ問題についてはlinkに従ってください。

Answer 2

この問題を解決するには、次の操作を行います。

このような店舗の設定Reduxの-モック店舗npm install redux-mock-store

と呼ばれるライブラリのインストール：例えば、あなたが店に含めるすべてのミドルウェアを追加

import configureStore from 'redux-mock-store'; 

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

を。 Reduxの-サンク、Reduxの-サガなど

あなたの初期状態を定義し、そして次のように自分の店を作成します。

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

次に、あなたがテストしているコンポーネントに新しい店舗を接続します

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

}); 

を