How do I apply Chai plugins across bundles in Karma?

Question

I'm running tests using Karma + Mocha + Chai + Webpack. I'm want apply multiple Chai plugins to my tests. I'm using the Karma config below, which splits my tests into multiple bundles.

I tried to use karma-chai to create a global chai instance, then load code that applied the plugins to the global instance. (See CHAI_CONFIG_PATH and plugins.config.js):

// karma.config.babel.js
import WEBPACK_CONFIG from '../webpack/webpack.config.test';

const TESTS_PATH = 'src/**/*.test.js';
const CHAI_CONFIG_PATH = 'config/chai/*.js';

export default function(config) {
  config.set({
    autoWatch: false,
    singleRun: !autoWatch,
    browsers: ['PhantomJS'],
    basePath: '../..',
    frameworks: ['mocha', 'chai'],
    files: [
      require.resolve('babel-polyfill'),
      CHAI_CONFIG_PATH
      TESTS_PATH
    ],
    preprocessors: {
      [require.resolve('babel-polyfill')]: ['webpack'],
      [CHAI_CONFIG_PATH]: ['webpack'],
      [TESTS_PATH]: ['webpack', 'sourcemap']
    },
    webpack: WEBPACK_CONFIG,
    webpackMiddleware: {
      noInfo: true
    },
    reporters: ['mocha'],
    logLevel: config.LOG_INFO
  });
}

Apply chai plugins:

// config/chai/plugins.config.js
import chaiImmutable from 'chai-immutable';
import chaiEnzyme from 'chai-enzyme';
import chaiSinon from 'chai-sinon';

chai.use(chaiImmutable);
chai.use(chaiEnzyme());
chai.use(chaiSinon);

Vanilla Webpack config:

// webpack.config.tests.js
export default {
  module: {
    rules: [
      BABEL_LOADER,
      CSS_LOADER,
      CSS_LOADER_GLOBALS,
      JSON_LOADER,
      MEDIA_FILE_LOADER,
      MEDIA_URL_LOADER
    ]
  },
  plugins: [
    DEFINE_PLUGIN,
    EXTRACT_TEXT_PLUGIN
  ],
  devtool: 'inline-source-map'
};

That worked until I added chai-enzyme. config/chai/plugins.config.js runs in it's own bundle, which loads enzyme. My tests are ran in another bundle, which loads enzyme again. The two enzymes aren't the same. chai-enzyme runs wrap(myShallowWrapper) on every assertion, but el instanceof ShallowWrapper is false.

// chai-enzyme/src/wrap.js
export default function wrap (el) {
  if (el instanceof ShallowWrapper) {
    return new ShallowTestWrapper(el)
  }
  ...
}

I want to keep the bundles separate to make developing tests easier. The only fix I found was to import plugins.config.js at the top of every test file, but this seems hacky. Is there a configuration that would let me apply Chai plugins to every bundle?

hoeni · Answer 1 · 2018-02-15T16:03:38.927

I had a similar problem. I did not find a perfect solution, but at least a workaround for my case:

I built my own wrapper around the expect import that needs to be included in any test case anyway. That way I can configure all my used chai plugins in a central place:

// my-expect.ts:
import {expect as _expect} from 'chai';
import * as chai from 'chai';

chai.use(require('chai-things'));
chai.use(require('chai-string'));

export const expect = _expect;

In my tests now I simply replace the former import {expect} from 'chai' by import {expect} from './my-expect' to use all the plugins I included there:

// my_spec.ts
import {expect} from './my-expect';

it('should use chai-things', () => {
  expect([5, 7, 9]).to.all.be.above(4);
});

How do I apply Chai plugins across bundles in Karma?

1 Answers1