0
J'essaie de tester un composant connecté, que j'ai exporté à la fois comme un composant connecté et comme un plaine selon la suggestion here par Ashwin Van Dijk.Tests unitaires réagissent-redux composants connectés avec Mocha/Chai
Tous mes tests pour les composants stupides fonctionnent bien, et l'application fonctionne bien (le composant connecté fonctionne).
Le composant est assez simple, juste afficher une liste extraite d'un état:
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);
Le test n'a même pas rodé, il me donne une drôle d'erreur regardant autour 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)
Des pensées?
On dirait que Mocha tente de charger un fichier CSS comme Javascript. J'ai résolu ce problème dans le passé en utilisant [ignore-styles] (https://www.npmjs.com/package/ignore-styles). Voir: https://stackoverflow.com/a/34375878/379358 –
Fonctionne! Nouvelle erreur: https://stackoverflow.com/questions/45655144/react-redux-app-testing-action-creator-containing-axios-get-call Mais c'est une nouvelle boîte de Pandore. Pouvez-vous mettre votre commentaire en réponse et je l'accepterai? –