La semana pasada he tenido que resolver un problema de esos que crees que está tirado pero que cuando te pones ves que no funciona como esperabas. Es más, acabas buscando en Google y en Stackoverflow, diciéndote a ti mismo por dentro, "No me lo puedo creer, ¡pensé que me llevaría solo un par de minutos hacerlo!"

Me estoy refiriendo a cómo testear tu código cuando usas KarmaJS como runner, Browserify para empaquetar tu código y BabelJS para compilar desde ES6. Sé que hay otros tutoriales que hablan sobre este tema, pero usaré este para recordarme a mí mismo cómo resolver algo que me llevó más de 5 horas dejarlo funcionando como a mí me gusta.

Instalar dependencias

Lo primero que vamos a hacer será instalar todas las dependencias que va a necesitar nuestro proyecto. Entre ellas están, obviamente, Karma, el preprocesador de Browserify para Karma, y la transformación de Babel para Browserify.

$ npm init

Luego sustituimos el contenido del fichero package.jsonpor este otro:

{
  "name": "karma-browserify-babel",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "karma start --single-run",
    "test:watch": "karma start"
  },
  "author": "Carlos Villuendas <carlosvillu@gmail.com>",
  "license": "ISC",
  "devDependencies": {
    "babelify": "^6.0.2",
    "chai": "^2.3.0",
    "karma": "^0.12.31",
    "karma-browserify": "^4.1.2",
    "karma-chrome-launcher": "^0.1.8",
    "karma-cli": "0.0.4",
    "karma-mocha": "^0.1.10",
    "karma-phantomjs-launcher": "^0.1.4",
    "karma-spec-reporter": "0.0.19",
    "mocha": "^2.2.4"
  }
}

Y ahora solo queda instalar todos los paquetes:

$ npm install

Con esto ya tenemos todo lo que vamos necesitar para poder ver nuestros tests en verde.

Escribir la configuración de Karma

Ahora toca crear el fichero que va a contener la configuración del runner:

$ touch karma.conf.js

y dentro escribimos:

'use strict';

module.exports = function(karma) {  
  karma.set({

    basePath: '',

    frameworks: [ 'browserify', 'mocha' ],

    files: [
      'test/**/*Spec.js'
    ],

    reporters: [ 'spec' ],

    preprocessors: {
      'test/**/*.js': [ 'browserify' ],
      'src/**/*.js': [ 'browserify' ]
    },

    browsers: [ 'PhantomJS' ],

    // browserify configuration
    browserify: {
      debug: true,
      extensions: ['.js'],
      transform: [ 'babelify' ]
    }
  });
};

Como puedes ver, la magia se hace pasando todos los ficheros de los tests por Browserify y luego configurándolo para que les aplique la transformación babelify. Piensa que con esto podemos hasta testear ficheros de ReactJS, ya que también serán convertidos al vuelo en JS plano.

Escribir algo de código

Para ver que todo funciona tal y como esperamos, vamos a escribir un poco de código dummy y ver si los tests pasan correctamente.

Primero escribimos el test:

// test/fooSpec.js

import {expect} from 'chai'

import Foo from '../src/foo'

describe( 'Foo', () =>{  
  it( 'should exists', () => {
    expect( Foo ).to.not.be.undefined
  } );

  describe( 'An instance', () =>{
    let foo;
    beforeEach( () =>{
      foo = new Foo();
    } );

    afterEach( () =>{
      foo = null;
    } );

    it( 'should have a name property', () =>{
      foo.name = 'Carlos'
      expect( foo.name ).to.be.equal( 'My name is Carlos' );
    } );
  } );
} );

Y luego el código que pasa los tests:

// src/foo.js

export default class Foo {  
  constructor(){
  }

  set name( name ){
    this._name = name
  }

  get name(){
    return `My name is ${this._name}`;
  }
};

Ejecutar los tests

Ya solo nos queda ejecutar nuestro runner. Para ello usamos los scripts que hemos defindo en el fichero package.json:

$ npm test

Así, nos devuelve:

karma-browsery-babejs testing

Todo nuestro código ha sido compilado y empaquetado al vuelo. Por supuesto, se pueden crear tantos ficheros de tests como sea necesario y seguir nuestro flujo ordinario de desarrollo habitual.

Bonus

Si tú también eres de los que hacen TDD a la hora de programar, quizá te gustará saber que con npm run test:watch puedes crear código y testearlo siguiendo el ciclo de desarrollo RED-GREEN-REFACTOR que tan bien conoces.

El código usado en este post lo puedes encontrar en Github

Suscríbete a mi lista de correo

* Campos obligatorios