React Mocha-chai 测试无法识别道具中的商店答案

【问题标题】：React Mocha-chai test not recognizing store from propReact Mocha-chai 测试无法识别道具中的商店
【发布时间】：2018-01-23 15:43:08
【问题描述】：

我在 Redux 连接的 React 组件上进行了 Mocha-chai 测试。为了将 Redux 存储传递给测试组件，我在测试文件中创建它并作为道具传递，但是测试抛出以下错误：

不变违规：在上下文中找不到“商店”或 “连接（项目）”的道具。要么将根组件包装在，或显式将“store”作为道具传递给 “连接（项目）”。

这是测试：

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

});

这是 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);

【问题讨论】：

你可以尝试使用Provider 并通过它存储。
<Provider store = {store}><Project ...otherprops /></Provider>
是的，我确实尝试添加提供者并传递商店。同样的错误。
@mh 你为什么不用酶？
您的任何测试都通过了吗？错误发生在测试文件的哪一行？您应该使用 describe 部分中的 beforeEach() 挂钩来创建商店和组件。

标签： javascript reactjs redux mocha.js chai

【解决方案1】：

要解决此问题，您可以执行以下操作；

安装一个名为 redux-mock-store npm install redux-mock-store 的库

这样设置商店：

import configureStore from 'redux-mock-store';

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

添加您想要包含在商店中的任何中间件，例如。 redux-thunk、redux-sagas 等

定义您的初始状态，并按如下方式创建您的商店：

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

});

【讨论】：

【解决方案2】：

为什么你将connect 用于没有mapStateToProps 或mapDispatchToProps 函数的Project 组件？

但是...没有必要将包装的组件测试到connect。您所需要的只是测试普通的Project 组件。

如何导出这两个组件？ – 请在同一问题上关注此link。

【讨论】：