Unit testing react-redux connected components with Mocha/Chai

Question

I'm trying to test a connected component, which I've exported both as a connected component and as a plain one as per the suggestion here by Ashwin Van Dijk.

All my tests for dumb components work fine, and the app runs fine (the connected component works).

The component is pretty straightforward-just displaying a list retrieved from state:

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);

The test doesn't even run-it gives me a funny looking error about 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)

Any thoughts?

It looks like Mocha is trying to load a CSS file as Javascript. I have solved this problem in the past using [ignore-styles](https://www.npmjs.com/package/ignore-styles). See: https://stackoverflow.com/a/34375878/379358 — John Girata, Oct 01 '17 at 13:17
Works! New error: https://stackoverflow.com/questions/45655144/react-redux-app-testing-action-creator-containing-axios-get-call But that's a new can of worms. Can you put your comment as an answer and I will accept it? — Boris K, Oct 01 '17 at 21:22

John Girata · Accepted Answer · 2017-10-02T14:46:27.390

1

It looks like Mocha is trying to load a CSS file as Javascript. I have solved this problem in the past using ignore-styles. See: https://stackoverflow.com/a/34375878/379358

(Moved from comment per request)

edited Oct 02 '17 at 14:46

answered Oct 02 '17 at 00:03

John Girata

2,021
15
15

Unit testing react-redux connected components with Mocha/Chai

1 Answers1