我正在使用Mocha、Chai、Karma、Sinon和Webpack进行单元测试.

我按照这个链接为React Redux代码配置了测试环境.

How to implement testing + code coverage on React with Karma, Babel, and Webpack

我可以成功地测试我的action和reducers javascript代码,但在测试我的组件时,它总是会抛出一些错误.

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': 'test@test.com',
        '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();
    })
});

上面的代码会出现以下错误.

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.

试图从西农间谍转到柴间谍.

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

推荐答案

一种更漂亮的方法是导出普通组件和封装在connect中的组件.命名的导出将是组件,默认为包装组件:

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'导入指定的导出.

Reactjs相关问答推荐

使用包装器组件时useState onChange的问题

CreateBrowserRouter将props 传递给父组件以验证权限

使用Reaction钩子窗体验证可选字段

如何使数据库数据在第一次呈现时显示?

如何在整个应用程序中显示通用弹出窗口中的点击事件

MUiv5和TSS-Reaction SSR问题:无法可靠地处理样式定义.CSSprops 中的ArrowFunctionExpression

在Reaction中的第一次装载时,Use Effect返回空数组

React组件未出现

useEffect firebase 清理功能如何工作?

在 golang 服务器中刷新或直接 url 路径时响应 404

将 useRef 与 useImperativeHandle 一起使用时,React 不会重新渲染

React - 函数组件 - 点击两次问题处理

如何读取 null 的属性?

如何使用 redux 和 react-plotly.js

使用dayjs时如何在输入类型日期时间本地字段中设置默认值?

从一个获取 axios 请求(ReactJS)中删除默认参数

如何使用react 路由将 url 参数限制为一组特定的值?

如何在 React 中的 Material Ui 多选中设置默认值?

React 检测哪些 props 在 useEffect 触发器上发生了变化

Material UI 安装和 React v. 18.2 出现问题