如何对React-Redux连接的组件进行单元测试? [英] How to Unit Test React-Redux Connected Components?

问题描述

我正在使用Mocha，Chai，Karma，Sinn，Webpack进行单元测试.

I am using Mocha, Chai, Karma, Sinon, Webpack for Unit tests.

我点击了此链接，以配置我的React-Redux代码测试环境.

I followed this link to configure my testing environment for React-Redux Code.

如何使用Karma，Babel和Webpack在React上实现测试+代码覆盖

我可以成功地测试动作和reducers的javascript代码，但是当涉及到测试我的组件时，它总是会抛出一些错误.

I can successfully test my action and reducers javascript code, but when it comes to testing my components it always throw some error.

import React from 'react';
import TestUtils from 'react/lib/ReactTestUtils'; //I like using the Test Utils, but you can just use the DOM API instead.
import chai from 'chai';
// import sinon from 'sinon';
import spies from 'chai-spies';

chai.use(spies);

let should = chai.should()
  , expect = chai.expect;

import { PhoneVerification } from '../PhoneVerification';

let fakeStore = {
      'isFetching': false,
      'usernameSettings': {
        'errors': {},
        'username': 'sahil',
        'isEditable': false
      },
      'emailSettings': {
        'email': '[e-mail]',
        'isEmailVerified': false,
        'isEditable': false
      },
      'passwordSettings': {
        'errors': {},
        'password': 'showsomestarz',
        'isEditable': false
      },
      'phoneSettings': {
        'isEditable': false,
        'errors': {},
        'otp': null,
        'isOTPSent': false,
        'isOTPReSent': false,
        'isShowMissedCallNumber': false,
        'isShowMissedCallVerificationLink': false,
        'missedCallNumber': null,
        'timeLeftToVerify': null,
        '_verifiedNumber': null,
        'timers': [],
        'phone': '',
        'isPhoneVerified': false
      }
}

function setup () {
    console.log(PhoneVerification);
    // PhoneVerification.componentDidMount = chai.spy();
    let output = TestUtils.renderIntoDocument(<PhoneVerification {...fakeStore}/>);
    return {
        output
    }
}

describe('PhoneVerificationComponent', () => {
    it('should render properly', (done) => {
        const { output } = setup();
        expect(PhoneVerification.prototype.componentDidMount).to.have.been.called;
        done();
    })
});

下面的代码附带了以下错误.

This following error comes up with above code.

FAILED TESTS:
  PhoneVerificationComponent
    ✖ should render properly
      Chrome 48.0.2564 (Mac OS X 10.11.3)
    Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.

试图从正宗间谍转变为亲密间谍.

Tried switching from sinon spies to chai-spies.

我该如何对我的React-Redux Connected Components(Smart Components)进行单元测试?

How should I unit test my React-Redux Connected Components(Smart Components)?

推荐答案

执行此操作的更漂亮的方法是同时导出您的纯组件和包含在connect中的组件.命名的export将是组件，默认是包装的组件:

A prettier way to do this, is to export both your plain component, and the component wrapped in connect. The named export would be the component, the default is the wrapped component:

export class Sample extends Component {

    render() {
        let { verification } = this.props;
        return (
            <h3>This is my awesome component.</h3>
        );
    }

}

const select = (state) => {
    return {
        verification: state.verification
    }
}

export default connect(select)(Sample);

通过这种方式，您可以正常导入应用程序，但是在进行测试时，可以使用import { Sample } from 'component'导入命名的导出.

In this way you can import normally in your app, but when it comes to testing you can import your named export using import { Sample } from 'component'.

这篇关于如何对React-Redux连接的组件进行单元测试?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！