使用 Mocha/Chai 对 react-redux 连接的组件进行单元测试

Question

我正在尝试测试连接组件，根据 Ashwin Van Dijk 的建议，我已将其导出为连接组件和普通组件。

我对哑组件的所有测试工作正常，应用程序运行正常（连接的组件工作）。

该组件非常简单 - 仅显示从状态检索的列表：

import React, { Component } from 'react';
import { connect } from 'react-redux';
import * as actions from '../actions';
import Plot from './plot';
import Spinner from 'react-spinkit';

export class Dashboard extends Component {
    componentWillMount() {
        this.props.fetchMessage();
        this.props.fetchPlots();
    }

    render() {
        const plots = this.props.plots;
        if (plots === undefined) {
            return (
                <div className="dashboard loading">
                    <Spinner name="three-bounce" />
                </div>
            );
        } 

        return (
            <div className='container-fluid dashboard'>
               **(all my stuff lives here)**
            </div>
        );
    }
}

function mapStateToProps(state) {
    return {
        message: state.auth.message,
        plots: state.auth.plots
    }
}

export default connect(mapStateToProps, actions)(Dashboard);

测试甚至没有运行-它给了我一个关于 css 的看起来很有趣的错误：

C:\Users\BaruchKogan\Documents\Visual Studio 2017\Projects\TrellisReact\node_modules\loaders.css\loaders.css:14
@-webkit-keyframes scale {
^
SyntaxError: Invalid or unexpected token
    at createScript (vm.js:56:10)
    at Object.runInThisContext (vm.js:97:10)
    at Module._compile (module.js:542:28)
    at Module._extensions..js (module.js:579:10)
    at Object.require.extensions.(anonymous function) [as .js] (C:\Users\BaruchKogan\Documents\Visual Studio 2017\Projects\TrellisReact\node_modules\babel-register\lib\node.js:152:7)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.require (module.js:497:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (C:\Users\BaruchKogan\Documents\Visual Studio 2017\Projects\TrellisReact\node_modules\react-spinkit\dist\index.js:40:3)
    at Module._compile (module.js:570:32)
    at Module._extensions..js (module.js:579:10)
    at Object.require.extensions.(anonymous function) [as .js] (C:\Users\BaruchKogan\Documents\Visual Studio 2017\Projects\TrellisReact\node_modules\babel-register\lib\node.js:152:7)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.require (module.js:497:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (C:/Users/BaruchKogan/Documents/Visual Studio 2017/Projects/TrellisReact/src/components/dashboard.js:5:1)
    at Module._compile (module.js:570:32)
    at loader (C:\Users\BaruchKogan\Documents\Visual Studio 2017\Projects\TrellisReact\node_modules\babel-register\lib\node.js:144:5)
    at Object.require.extensions.(anonymous function) [as .js] (C:\Users\BaruchKogan\Documents\Visual Studio 2017\Projects\TrellisReact\node_modules\babel-register\lib\node.js:154:7)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.require (module.js:497:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (C:/Users/BaruchKogan/Documents/Visual Studio 2017/Projects/TrellisReact/test/components/dashboard_test.js:2:1)
    at Module._compile (module.js:570:32)
    at loader (C:\Users\BaruchKogan\Documents\Visual Studio 2017\Projects\TrellisReact\node_modules\babel-register\lib\node.js:144:5)
    at Object.require.extensions.(anonymous function) [as .js] (C:\Users\BaruchKogan\Documents\Visual Studio 2017\Projects\TrellisReact\node_modules\babel-register\lib\node.js:154:7)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.require (module.js:497:17)
    at require (internal/module.js:20:19)
    at C:\Users\BaruchKogan\Documents\Visual Studio 2017\Projects\TrellisReact\node_modules\mocha\lib\mocha.js:220:27
    at Array.forEach (native)
    at Mocha.loadFiles (C:\Users\BaruchKogan\Documents\Visual Studio 2017\Projects\TrellisReact\node_modules\mocha\lib\mocha.js:217:14)
    at Mocha.run (C:\Users\BaruchKogan\Documents\Visual Studio 2017\Projects\TrellisReact\node_modules\mocha\lib\mocha.js:469:10)
    at loadAndRun (C:\Users\BaruchKogan\Documents\Visual Studio 2017\Projects\TrellisReact\node_modules\mocha\bin\_mocha:360:22)
    at rerun (C:\Users\BaruchKogan\Documents\Visual Studio 2017\Projects\TrellisReact\node_modules\mocha\bin\_mocha:387:5)
    at C:\Users\BaruchKogan\Documents\Visual Studio 2017\Projects\TrellisReact\node_modules\mocha\bin\_mocha:395:7
    at StatWatcher.<anonymous> (C:\Users\BaruchKogan\Documents\Visual Studio 2017\Projects\TrellisReact\node_modules\mocha\lib\utils.js:174:9)
    at emitTwo (events.js:106:13)
    at StatWatcher.emit (events.js:191:7)
    at StatWatcher._handle.onchange (fs.js:1501:10)

有什么想法吗？

Answer 1

Mocha 似乎正在尝试将 CSS 文件加载为 Javascript。我过去使用忽略样式解决了这个问题。参见：

（根据请求从评论中移出）

使用 Mocha/Chai 对 react-redux 连接的组件进行单元测试

Unit testing react-redux connected components with Mocha/Chai

mocha.js

chai

reactjs

react-redux