Testen von ReactJS-Komponenten mit Karma und Webpack

In diesem Artikel erfahren Sie, wie Sie Karma konfigurieren, um ReactJS-Komponenten zu testen. Es wurde ursprünglich auf Codementor Justin Woo’s gepostet bloggen.


Unnützer Hintergrund

Vor ungefähr 8 Monaten habe ich angefangen, mich nach Lösungen zum Testen von React-Komponenten umzusehen, hatte aber keine guten Ideen. Ich habe zuerst QUnit ausprobiert, das gut zu funktionieren schien, aber ich wollte, dass es automatisch ausgeführt wird. Ich habe einen Qunit-Runner ausprobiert, ähnlich wie das Ember.js-Projekt früher Tests durchgeführt hat, aber das war am Ende auch zu umständlich.

Ich wechselte zu Karma, um meine Komponenten zu testen, und verbrachte meine Zeit damit, meine Test-Assets zu erstellen und sie auf Karma hochzuladen, aber das war ziemlich langsam, weil ich die Builds nie zwischengespeichert und für jedes Bundle einen sauberen Webpack-Build ausgeführt habe. Pfui. Facebook veröffentlichte Jest und ich wechselte. Ich fand es großartig, aber ich stieß schnell auf einige Probleme:

  1. Ich mag das Modul-Mocking nicht, das die Dinge wie Black Boxes aussehen lässt
  2. Ich wollte/brauchte nie Blackboxing
  3. Es war langsam
  4. Es ließ sich nicht problemlos auf allen Computern meiner Kollegen installieren
  5. Die Dokumentation fehlte
  6. Ich musste mir eine hackige Methode einfallen lassen, um es von Node aus aufzurufen
  7. Es funktionierte nicht mit io.js, als ich es zum ersten Mal versuchte
  8. Ich wusste nicht wirklich, wie ich meine Tests debuggen sollte, außer durch die wirklich langen Stack-Traces, und das größte, was ich nicht mochte, war das
  9. Es lief nicht in einem echten Browser

Dieser Beitrag existiert, weil:

  1. Die Jungs, die React-Router schreiben, sind GÖTTER
  2. Jeder andere Blogbeitrag zum Testen von React-Komponenten, den ich gesehen habe, war super kompliziert
  3. Weil dieses Setup das Beste ist, was ich seit dem reinen Rendern bezüglich React gefunden habe

Wie sieht das aus, wenn du es fertig hast?

Warum sollte ich das wollen?

Wann war das Testen und Debuggen mit vollständigen Sourcemaps so einfach?

Okay, wie bekomme ich das?

Installation

Abhängigkeiten, die Sie wahrscheinlich benötigen werden:

  • Karma – der eigentliche Testläufer
  • karma-cli – das cli für Karma
  • karma-mocha – für die Verwendung des Mocha-Testframeworks mit Karma
  • karma-webpack – für die Verwendung von webpack zur tatsächlichen Vorverarbeitung von Quellen für Karma
  • karma-sourcemap-loader — zum Laden von Sourcemaps in Karma
  • karma-chrome-launcher – zum Starten von Chrom
  • erwarten – Michael Jacksons (nicht zu verwechseln mit dem berühmten Sänger/Tänzer) erstaunlich schöne Behauptungsbibliothek
  • babel-loader – oder eine Art Loader für Ihre JSX-Dateien
  • reagieren – nun, das ist es, was Sie verwenden, richtig?
  • webpack – webpack, das erstaunlichste Browser-Build-Tool aller Zeiten

Aufbau

Karma liest aus a karma.conf.js Datei, also stellen wir sicher, dass wir sie richtig einrichten.

karma.conf.js

var webpack = require('webpack');

module.exports = function (config) {
  config.set({
    browsers: [ 'Chrome' ], 
    singleRun: true, 
    frameworks: [ 'mocha' ], 
    files: [
      'tests.webpack.js' 
    ],
    preprocessors: {
      'tests.webpack.js': [ 'webpack', 'sourcemap' ] 
    },
    reporters: [ 'dots' ], 
    webpack: { 
      devtool: 'inline-source-map', 
      module: {
        loaders: [
          { test: /\.js$/, loader: 'babel-loader' }
        ]
      }
    },
    webpackServer: {
      noInfo: true 
    }
  });
};
Next, we need our single file, which will actually use the webpac

Als nächstes benötigen wir unsere einzelne Datei, die tatsächlich die Webpack-Require-API verwendet, um die benötigten Dateien automatisch zu finden.

tests.webpack.js

var context = require.context('./src', true, /-test\.js$/); 
context.keys().forEach(context);

Schreiben Sie einige Tests

Tests müssen wirklich nur Dinge beweisen wie 1 === 1stellen wir also sicher, dass es leicht verständlich ist.

var React = require('react');
var TestUtils = require('react/lib/ReactTestUtils'); 
var expect = require('expect');
var Root = require('../root'); 

describe('root', function () {
  it('renders without problems', function () {
    var root = TestUtils.renderIntoDocument(<Root/>);
    expect(root).toExist();
  });
});

Führen Sie die Tests durch!

Nur ein einfaches karma start werde die Tests einmal durchführen. karma start --single-run=false für mehrere Läufe.

Fazit

Und das war’s! Ziemlich minimale Konfiguration, um eine wirklich schöne Testumgebung einzurichten. Ein großes Dankeschön an die React-Router-Jungs, die dies auf GitHub veröffentlicht haben, um es durchzuziehen.

Verweise

React-Router — https://github.com/rackt/react-router/
Karma — http://karma-runner.github.io/0.12/index.html
Reagieren Sie auf TestUtils — http://facebook.github.io/react/docs/test-utils.html
Mein Beispiel-Repo —

Bonus

Das mit Travis zum Laufen zu bringen, ist trivial. Mach einfach ein paar Sachen.

Ändern Sie, welcher Browser in Travis ausgeführt wird

Travis kommt nur mit Firefox, also sollten wir das entsprechend ändern.

Installieren Sie den Firefox-Launcher, karma-firefox-launcherund ändern Sie dann Ihre Karma-Konfiguration entsprechend auf browsers: [process.env.CONTINUOUS_INTEGRATION ? 'Firefox' : 'Chrome'],. Sie können auch PhantomJS verwenden, wenn Sie das wirklich wollen, indem Sie den richtigen Loader verwenden.

Konfigurieren Sie Travis

Füge hinzu ein .travis.yml mit den entsprechenden Einstellungen. Du musst anfangen xvfb in Travis entsprechend, damit Firefox funktioniert.

travis.yml

language: node_js
node_js:
  - "0.10"
before_install:
  - "exportDISPLAY=:99.0"
  - "sh-e/etc/init.d/xvfbstar

Und dann kann es losgehen!


Sehen Sie Travis in Aktion in meinem Demo-Repo: (Bauprotokoll hier: https://travis-ci.org/justinwoo/react-karma-webpack-testing/builds/51681700)

Similar Posts

Leave a Reply

Your email address will not be published. Required fields are marked *