陣營摩卡齊測試不從丙

識別存儲我有連接的終極版一個摩卡齊測試陣營組件。爲了通過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);

來源

2017-08-15 mhatch

你可以嘗試使用'Provider'並傳遞它存儲。 – nrgwsth

'<提供者儲存= {存儲}><項目... otherprops />' – nrgwsth

是的，我也嘗試添加提供程序和傳遞店。同樣的錯誤。 – mhatch

爲什麼你用connect爲Project組件，而不mapStateToProps或mapDispatchToProps的功能呢？

不過......這不是必要的測試包裹組件爲connect。您所需要的只是測試素材Project組件。

如何導出兩個組件？ - 請在這個問題上關注此link。

來源

2017-09-02 06:54:48 chuve

要解決此問題，你可以做以下;

安裝一個叫做終極版 - 模擬店npm install redux-mock-store

設置店裏像這樣的庫：

import configureStore from 'redux-mock-store'; 

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

添加要包括在商店，如任何中間件。終極版-的thunk，終極版，傳奇等

定義您的初始狀態，並建立您的商店如下：

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

});

來源

2017-09-05 03:16:53 Tawanike

陣營摩卡齊測試不從丙

回答

相關問題