How do I write regression tests for a library built with webpack?

Question

I'm thinking of building our code with Webpack and babel, so we can mix ES6 dependencies with pre-existing AMD dependencies, and also continue supporting IE11, due to business requirements.

Our regression tests are essentially:

• one javascript test file for unit testing each class
• one HTML file for each custom element, with a javascript file to run WebDriver tests against it

This works well with Intern, where you just list all the javascript test files in your Intern configuration. But it doesn't sound practical with Webpack, because it effectively makes hundreds of entry points.

Is the solution just to have a test-index.js type file that requires (i.e. includes) all the test javascript files, and then combine all the HTML test files into a single Storybook type "app"? Or is there something simpler?

Answer 1

As you point out, having tens or hundreds of entry points can lead to very long build times. I've generally found that bundling all the tests into a single bundle and having Intern load that as suite gives the best experience.

// intern.json
{
  "suites": "build/unit_tests.js"
}

You can also encode the list of tests in the webpack config rather than having to manually create something like a test-index.js file.

// webpack.config.js
const { sync: glob } = require('glob');
module.exports = {
  entry: glob('tests/unit/**/*.js'),
  output: {
    filename: 'unit_tests.js'
  }
};