微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

javascript – React Mocha-chai测试不识别来自道具的商店

我在Redux连接的React组件上进行了Mocha-chai测试.为了将Redux存储传递给测试组件,我在测试文件中创建它并将其作为prop传递,但测试会抛出以下错误

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

});

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

解决方法

为什么在没有mapStatetoProps或mapdispatchToProps函数的情况下使用connect for Project组件?

但是……没有必要将包装组件测试到连接中.
您只需要测试普通项目组件.

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

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐