Giter Site home page Giter Site logo

arrow-mocha's Introduction

ES6 arrows vs Mocha

ES6 arrow functions have static, lexical this binding. This is a great feature, but it prevents them from playing nicely with Mocha, because Mocha provides the test context using dynamic this binding:

before(function() {
  this.myObj = new MyAwesomeThing()
})
it('some test', function() {
  console.log('myObj is:', this.myObj) // MyAwesomeThing {}
})

This will not work for arrow functions:

it('some test', () => console.log('myObj is:', this.myObj)) // undefined, `this` points to the global object

This little library provides a set of decorated Mocha functions (it, before, after, beforeEach and afterEach) that pass the context as the first argument to your arrows:

before(t => {
  t.myObj = new MyAwesomeThing()
})
it('some test', t => console.log('myObj is:', t.myObj)) // MyAwesomeThing {}

This is done by wrapping each arrow into the usual function, obtaining the context through this and passing it to the first argument of the arrow.

Installation and usage

npm install --save-dev arrow-mocha

In a file with tests, ES6 syntax:

import { it, before, after, beforeEach, afterEach } from 'arrow-mocha'

CommonJS syntax:

var arrowMocha = require('arrow-mocha'),
    it = arrowMocha.it,
    before = arrowMocha.before,
    /// etc.

If you use Babel for transpiling your tests, you may have difficulties using this module, because, by default, Babel doesn't transpile files residing inside the node_modules directory. For this case, ES5 version (generated with that same tool) is provided too. Just replace arrow-mocha with arrow-mocha/es5:

import { it, before, after, beforeEach, afterEach } from 'arrow-mocha/es5'

The same applies to CommonJS syntax. Another option is to configure Babel to not ignore this module. For example:

package.json

//...
  "scripts": {
    "test": "mocha --harmony --require ./test/helpers/babel-hook.js ./test"
  }
//...

test/helpers/babel-hook.js

require('babel/register')({
  ignore: /node_modules(?![/]arrow-mocha)/
  // or ignore: false to transpile all NPM modules
})

Example

// This line is important, otherwise the magic will not work!
// Is is commented because it breaks GitHub syntax highlighting.
//
// import { it, before, after, beforeEach, afterEach } from 'arrow-mocha'


describe('The functions imported on the previous line decorate the corresponding '
+        'Mocha functions', () =>
{
  describe('so that the Mocha test context gets passed to the first argument', () => {
    before(t => {
      t.some = 'value'
    })
    it('like this', t => assert.equal(t.some, 'value'))
  })


  describe('this works for async tests too:', () => {
    const delay = (ms, value) => new Promise(resolve => {
      setTimeout(resolve, ms, value)
    })
    before(t => {
      return delay(10, 'value').then(v => {
        t.another = v
      })
    })
    describe('when a test/hook returns a Promise', () => {
      it('the context is passed to the first argument', t => delay(10).then(() => {
        assert.equal(t.another, 'value')
      }))
    })
  })


  describe('when an async test/hook requires a callback,', () => {
    const delay = (ms, fn) => {
      setTimeout(fn, ms)
    }
    before((t, done) => {
      return delay(10, () => {
        t.third = 'value'
        done()
      })
    })
    describe('declare it as the second argument;', () => {
      it('the context will be passed to the first arg', (t, done) => delay(10, () => {
        assert.equal(t.third, 'value')
        done()
      }))
    })
  })
})

License

MIT

arrow-mocha's People

Contributors

skozin avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.