Hugo Future Imperfect Slim

Tracey Jaquith 路 PoohBot Pictures

Technophile 路 Optimist 路 CyclistArchivist 路 Design 路 Video 路 TV 路 Kubernetes 路 Docker

3 minutes read

greed green is good

things turning me on this week
鈽昬njoy with a hot cupa java/script
JavaScript has gotten even better and you can now run 100% ES Modules code “natively” through the entire node, JS, testing, and coverage (and more!) ecosystem. Picking the right tools that understand ES Modules is key - here we use mocha and c8 (also show how to use jasmine (what is under jest) and nyc/. istanbul if desired). Bonus points? sinon for mocking.

Sample code setup

demonstration minimal working git repository

Uses simply: mocha and c8

The goal is to avoid babel, transpiling, and any dynamic transform of the JS source/test code as possible.

  • mocha since it can understand ES Modules (and make import/export work nicely).
  • c8 for code coverage (since it understands ES Modules)
  • expectations for jest/jasmine like testing, eg: expect('hai'.length).toBe(3)
  • sinon for mocking, stubs, and spies (more below on that)

There’s a few subtle things to get setup and “just right” to make it all work seamlessly. But once you know them, you’re good to go.

If you prefer jasmine

Thus

you can now write all your source and test code in the modern/future default 100% ES Modules (AKA import / export), eg:

import { foo, foobar } from '../src/foo.js'

describe('foo()', function () {
  it('should return number plus one', function () {
    expect(foo(1)).toEqual(2)
  })
})

run


git clone https://github.com/traceypooh/js-es-modules-coverage-testing
cd js-es-modules-coverage-testing
npm install
npm test

(or alternatively: npx c8 mocha)

yields

> @ test /Users/tracey/dev/js-es-modules-coverage-testing
> c8 mocha

  bar()
    鉁 should return number minus one

  foo()
    鉁 should return number plus one

  foobar()
    鉁 should return same number

  goo()
    鉁 should switch from 2 to 3 via a swap out
    鉁 should switch from 2 to 3 via a mock

  5 passing (11ms)

----------|---------|----------|---------|---------|-------------------
File      | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s
----------|---------|----------|---------|---------|-------------------
All files |     100 |      100 |     100 |     100 |
 bar.js   |     100 |      100 |     100 |     100 |
 foo.js   |     100 |      100 |     100 |     100 |
 goo.js   |     100 |      100 |     100 |     100 |
----------|---------|----------|---------|---------|-------------------

the magic

  • in package.json, this tells node and scripts all .js files are ES Modules
{
  "type": "module",
}
  • in package.json, this tells mocha to preload expectations (for jest-like testing)
{
  "mocha": {
    "require": "expectations"
  }
}

mocking, stubs, and spies

By Far, this is the most complicated thing to get right. I spent hours and hours over a few days on/off trying to get mocking to work (first with jasmine, then sinon).

Fortunately, I found this lil’ gem:

Normally, ES Modules are very locked down and hard to mock. By grouping all the export-ed methods via export default Goo, and importing via import Goo from '../src/goo.js', we can replace methods if needed for testing. (Imagine needing to test something that live-fetches resources, etc.)

2020 as ever, is a super-exciting time 馃コ for javascript!

Say something

Comments

Nothing yet.

Recent posts

See more

Categories

Tags

#spottheshuttle 1940s 1st-person 3d accident aids-lifecycle airplane animals apple-watch architecture arkit art ascii-art asia augmented-reality bali bay-area biking birthday cafe-racer camaro camera-video cars cat-pee cat-psychology cats coding college colorspaces computer-vision cornell css dark-mode decaf deinterlace desert design diy documentary ducting emacs endeavour family ffmpeg games geek golden-gate-bridge google-cardboard green-magic-man h.264 hack highway-1 home hugo hyperlapse internet-archive ios iphone javascript kubernetes landscapes linux lisp luke-battling-darth mac macosx mashup metal montclair motion-jpeg motorcycle mplayer nasa new-bay-bridge news ninja oakland partioning php php-htm-mode politics protest recording remaster remix remodel shuttle small-town star-wars swift technical time-lapse time-machine timing-belt-adjustment top-end-rebuild tracey training-ride vacation valve-job video virtual-reality vlog weekend-mechanic work x264 xcode yuvj420p zx6

About

tracey is a nonstop dance party. so you dont have to. dont ask me about k8s. thanks for dropping by today. you look nice.