连接反应破坏我的测试用例的方法

Question

我正在尝试为我的 jsx 文件编写测试用例...
我从另一个 jsx 文件中获取了示例测试用例...
该文件没有连接方法...
但是他的文件有连接方法..
我认为正因为如此，它破坏了我的测试用例...
你们能告诉我如何解决吗..
在下面提供我的代码...
清除下面的代码 https://gist.github.com/js08/d590e78e8923e68b191a

语法错误：C:/codebase/sports/test/sports-tests.js：意外的标记 (20:73) 18 | 19 |它('should render correctly', () => {

20 | shallowRenderer.render(); | ^ 21 | /*let renderedElement = shallowRenderer.getRenderOutput(); 22 |

test case
import {expect} from 'chai';
import React from 'react';
import TestUtils from 'react-addons-test-utils';
import sportsPageDefault from '../src/sports-Page-Default';
import initializeJsDom from './test-utils/dom.js';
import {getGridLayoutClasses} from 'sports-css-grids';
//import _difference from 'lodash/array/difference';


describe('shallow renderer tests for sports-Page-Default ', function() {
    let shallowRenderer = TestUtils.createRenderer();
    console.log("shallowRenderer" + JSON.stringify(shallowRenderer));


    it('should render correctly', () => {
        shallowRenderer.render(<sportsPageDefault headerClass='8887' layout= {id: 100, text: 'hello world'} sidebar= {id: 100, text: 'hello world'} title="Demo" />);
        let renderedElement = shallowRenderer.getRenderOutput();
        console.log(renderedElement);

       /* let actualTitleEl = renderedElement.props.children[0].props.children[0];
        let expectedTitleEl = <h1 className="transactionalPageHeader-appName font-serif">Demo</h1>;
        expect(actualTitleEl).to.deep.equal(expectedTitleEl);*/
    });



});

actual code

import './css/sports-bottom-layout.css';
import './css/sports-Page.css';
import './css/sports-leftCornerLayout.css';

import React from 'react';
import PageHeader from './components/page-header/page-header';
import MainContent from './components/main-content';
import sports-bottom-layout from './components/sports-bottom-layout/sports-bottom-layout';
import {getPanelLayoutState} from './util/PageLayout';
import {getGridLayoutClasses} from 'sports-css-grids/lib/js/gridLayout';
import PagePureRenderMixin from './util/PagePureRenderMixin';
import {connect} from 'react-redux';
import {setHeaderPanelState, setRightPanelState} from './redux/layout/layout-actions';

console.log("inside");
let customMixin = PagePureRenderMixin({
    state: {
        mainPanelGridClassList: function(classArray) {
            return classArray.length;
            console.log("classArray.length" + classArray.length);
        }
    }
});

let PT = React.PropTypes;

let sportsPageDefault = React.createClass({


    propTypes: {
        headerClass: React.PropTypes.string,
        layout: PT.object.isRequired,
        sports-leftCornerLayout: PT.oneOfType([
            PT.func,
            PT.object
        ]),
        title: PT.string.isRequired
    },


    //cpomponent m,ount code

});

function sportsShallow(itemA, itemB) {
    for (let i in itemA) {
        if (itemA[i] !== itemB[i]) {
            return false;
        }
    }
    return true;
}

export default connect(state => ({
    layout: state.Page.layout
}))(sportsPageDefault);

错误： ts 抛出错误，因为不确定如何为函数传入 onof 类型....

shallowRenderer.render(<sportsPageDefault headerClass='8887' layout= {{id: 100, text: 'hello world'}} sidebar= {[{onAppExit},{id: 100, text: 'hello world'}]} title={"Demo"} />);

    propTypes: {
        headerClass: React.PropTypes.string,
        layout: PT.object.isRequired,
        sports-leftCornerLayout: PT.oneOfType([
            PT.func,
            PT.object
        ]),
        title: PT.string.isRequired
    },
TypeError: Cannot read property 'propTypes' of undefined
at [object Object].ReactCompositeComponentMixin._processProps (\node_modules\react\lib\ReactCompositeComponent.js:352:20)
at [object Object].ReactCompositeComponentMixin.mountComponent (\node_modules\react\lib\ReactCompositeComponent.js:129:28)
at [object Object].wrapper as mountComponent
at [object Object].ReactShallowRenderer._render (\node_modules\react\lib\ReactTestUtils.js:362:14)
at [object Object].ReactShallowRenderer.render (\node_modules\react\lib\ReactTestUtils.js:344:8)
at Context. (C:/codebase/usaa-template-standard/test/usaa-template-standard-tests.js:23:25)

Answer 1

我会先稍微清理一下你的代码，它看起来一团糟；您那里有一些字符会破坏您的代码，但我假设您出于演示目的而放置，并且将所有代码放入一个代码块中会使它看起来非常错误。

无论如何，大多数人在尝试测试 connected react-redux 组件时都会遇到一个很大的实际问题。他们的库中有漂亮的文档，解释了测试它们的好方法，我将总结一下。

除非祖先中有 Provider，否则您无法呈现连接的组件。您始终可以在测试中渲染其中一个，但推荐的解决方案是同时导出已连接和未连接的组件。在你的情况下，你会这样做：

export let sportsPageDefault = React.createClass({
    propTypes: {
        headerClass: React.PropTypes.string,
        layout: PT.object.isRequired,
        sports-leftCornerLayout: PT.oneOfType([
            PT.func,
            PT.object
        ]),
        title: PT.string.isRequired
    },
});

export default connect(state => ({
    layout: state.Page.layout
}))(sportsPageDefault);

请注意，我正在导出默认值以及 class 本身。这允许您在生产代码中以通常的方式导入组件，但在您的测试中，按如下方式导入：

import { sportsPageDefault } from 'path/to/component';

我们这里做的是导入未连接的组件。您现在已经将 redux 与您的组件解耦了。

鉴于您的代码状态，很难查明您遇到的错误。如果您清理它并提供更多信息，我们可能会提供帮助，但这是测试 redux 组件的一个很好的起点。

连接反应破坏我的测试用例的方法

connect method of react breaking my test case

javascript

jquery

mocha.js

angularjs

reactjs