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

问题描述

我正在使用 Mocha、Chai、Karma、Sinon、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 上实现测试 + 代码覆盖

我可以成功地测试我的 action 和 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.

尝试从 sinon spy 切换到 chai-spies.

Tried switching from sinon spies to chai-spies.

我应该如何对我的 React-Redux 连接组件(智能组件)进行单元测试?

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

推荐答案

执行此操作的一种更好的方法是导出您的普通组件和包含在 connect 中的组件.命名导出将是组件，默认是包装的组件:

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屋！