Adding ES6 Support to Tests using Mocha and Babel

[00:00] We're really excited because we finally added ES6 support to our module. Now, we go to run the test, and we see that there is a bit of a problem. Istanbul and Mocha can't deal with ES6 very well, specifically this import statement. We need to add ES6 support to our tests. That's what we're going to do.

[00:21] To get started, we're first going to install, as a dev dependency, NYC, which handles ES6 for code coverage a little bit better than Istanbul. It actually uses Istanbul under the hood, but it handles the ES6 syntax for us. Let's go ahead and change out Istanbul for NYC for right now. We're still not done though. Mocha doesn't understand ES6 either. We need to make sure that Mocha can run our tests even when they're written in ES6.

[00:48] To do this, we're going to leverage the compilers flag. For JS files, we want to use the babel-register compiler. This is another dependency we'll need to install. Now, if we run npm run watch test, we'll expand this a bit. We'll see that our tests are now running. Let's see what this looks like with coverage.

[01:11] Before that, we need to make sure that we add the compilers to our coverage script. Now, we can run npm run test, or npm test, or npm t. All three of those are the same. We'll see that this failed. The reason that this failed is because NYC's API is a little bit different.

[01:30] Let's go ahead and make a couple of changes here. NYC actually has a really nice API. We're going to clean up our scripts a little bit to make it easier for NYC. First, we're going to add a cover script, which we'll use in a moment. Then, we'll change our test script to actually simply be Mocha src/index.test.js. Compilers js babel-register.

[01:56] Then, because this looks an awful lot like our watch test, we can actually change our watch test to be npm t-- -w. That's simply adding the -w flag to this script. Our watch test should still work if we run npm.run watch test. If you see, the script that it's actually executing is npm t-- -w.

[02:20] Then, it ends up executing the full script that we want it to run in the first place. This is leveraging a feature from npm with that --. Any npm script that's run with the -- will have the additional arguments passed to the script that's being run. Here, we'll simply say NYC and then npm t.

[02:41] Now, if we cancel this, and run npm run cover, we'll see that we get our coverage report. We'll see that our tests all passed just fine even though they're requiring files, even though our tests are using files that are written in ES6. It's working because we're leveraging the compiler's flag from Mocha using babel-register, which is transpiling our files on the fly.

[03:05] We're not done though. There are couple of things we need to update. First, our git hook here needs to change from the test to run cover because we want to check the coverage on our git hook. Then, also in Travis, we need to change test to cover here as well.

[03:21] Now, let's go ahead and go into one of our test files. We'll convert this to ES6 module syntax. With that, if we run npm run cover, then everything should run just fine. It does. If we run npm run watch test, then we'll see that our tests are running and being watched as well.

[03:44] Finally, one other thing that we need to make sure we do is we'll see we have this NYC output. I'm not sure what NYC is doing with that, but we do not want to commit that to source control. We'll add that gitignore, and we're good to go.

[03:56] In review, let's check out some of the things that we had to change. First, we had to change Istanbul for NYC. We installed NYC right here. We uninstalled Istanbul. Then, we replaced Istanbul check coverage with NYC check coverage, which has the same API. But then, we changed the test script to be just the base test script that we want. Then, we leveraged that test script in both the cover and the watch test npm scripts.

[04:26] In the cover script, we simply added NYC and then npm t. In the main base test script, we added these compilers to the JS files, and used the babel-register compiler. Then, we had to update our git hook to run the new coverage script. We updated our travis.yml to run the coverage script. We updated our gitignore to ignore the NYC Output folder that NYC creates for us. Then, from there, we can start writing our tests in ES6 and importing things that are using ES6 syntax.