Wallaby.js Supported technologies: Vue, Vue CLI

If you are using Jest >= v24 or or Vue CLI >= v4, you may use automatic configuration that allows you to start Wallaby without any configuration.

Vue CLI 3.x - JavaScript and Jest

For step-by-step instructions to configure and use Wallaby.js with Vue.js CLI, please refer to our Vue.js CLI Tutorial.

Wallaby expects that your project has the wallaby-vue-compiler dependency that is necessary to run with Vue CLI projects.

yarn add wallaby-vue-compiler -D
   or
npm i wallaby-vue-compiler --save-dev

The configuration for Vue CLI 3.x JavaScript/Jest generated projects is provided below. Simply copy and paste the configuration into a new wallaby.js configuration file in your project root directory. You may also refer to our example repo.

module.exports = (wallaby) => {

  process.env.VUE_CLI_BABEL_TRANSPILE_MODULES = true;

  const compiler = wallaby.compilers.babel({presets: [['@vue/app', {modules: 'commonjs'}]]})

  return {
    files: ['src/**/*', 'jest.config.js', 'package.json'],

    tests: ['tests/**/*.spec.js'],

    env: {
      type: 'node'
    },

    compilers: {
      '**/*.js': compiler,
      '**/*.vue': require('wallaby-vue-compiler')(compiler)
    },

    preprocessors: {
      '**/*.vue': file => require('vue-jest').process(file.content, file.path, require('./package').jest || require('./jest.config'))
    },

    setup: function (wallaby) {
      const jestConfig = require('./package').jest || require('./jest.config')
      jestConfig.transform = {}
      wallaby.testFramework.configure(jestConfig)
    },

    testFramework: 'jest'
  }
}

Vue CLI 4.x - Mocha

The configuration for Vue CLI 4.x projects that use Mocha as their test runner is provided below. Simply copy and paste the configuration into a new wallaby.js configuration file in your project root directory.

const config = require("@vue/cli-service/webpack.config.js");

const redundantPlugins = {
  ForkTsCheckerWebpackPlugin: true,
  PreloadPlugin: true,
  HtmlWebpackPlugin: true,
  CopyPlugin: true,
  CaseSensitivePathsPlugin: true,
  FriendlyErrorsWebpackPlugin: true,
};

config.plugins = config.plugins.filter(
  (plugin) => !(plugin.constructor && redundantPlugins[plugin.constructor.name])
);

// vue files are split into multiple webpack modules,
// we need to choose and map script webpack resource (i.e. module) to one absolute file path
const mapResourceToPath = (context) => {
  const resource = context.resource;

  if (!resource) return resource;

  if (context.version) {
    // loading phase
    if (resource.endsWith("vue")) {
      return `${resource}?ignore`;
    }

    return resource.indexOf("type=script") > 0
      ? context.resourcePath
      : resource;
  }

  // processing phase
  return resource.indexOf("type=script") > 0 && context.wallaby
    ? resource.substring(0, resource.indexOf("?"))
    : resource.endsWith("vue")
    ? `${resource}?ignore`
    : resource;
};

module.exports = function(wallaby) {
  return {
    files: [{ pattern: "src/**/*.*", load: false }],

    tests: [{ pattern: "tests/**/*.*", load: false }],

    postprocessor: wallaby.postprocessors.webpack(config, {
      setupFiles: [require.resolve("@vue/cli-plugin-unit-mocha/setup")],
      mapResourceToPath: mapResourceToPath,
    }),

    env: {
      kind: "chrome",
    },

    setup: function() {
      // required to trigger test loading
      window.__moduleBundler.loadTests();
    }
  };
};

Vue CLI 3.x - TypeScript and Jest

The configuration for Vue CLI 3.x TypeScript/Jest generated projects is provided below. Simply copy and paste the configuration into a new wallaby.js configuration file in your project root directory.

module.exports = wallaby => {
  process.env.VUE_CLI_BABEL_TRANSPILE_MODULES = true;

  return {
    files: ['src/**/*', 'jest.config.js', 'package.json', 'tsconfig.json'],

    tests: ['tests/**/*.spec.ts'],

    env: {
      type: 'node'
    },

    preprocessors: {
      '**/*.js?(x)': file => require('@babel/core').transform(
        file.content,
        {sourceMap: true, compact: false, filename: file.path, presets: [require('babel-preset-jest'), require("@babel/preset-env")]})
    },

    setup(wallaby) {
      const jestConfig = require('./package').jest || require('./jest.config');
      jestConfig.transform && delete jestConfig.transform['^.+\\.tsx?$'];
      wallaby.testFramework.configure(jestConfig);
    },

    testFramework: 'jest'
  }
}

Vue CLI 2.x - JavaScript and Jest (Webpack template)

Wallaby expects that your project has the wallaby-vue-compiler dependency that is necessary to run with Vue CLI projects.

yarn add wallaby-vue-compiler -D
   or
npm i wallaby-vue-compiler --save-dev

The configuration for Vue CLI 2.x JavaScript/Jest generated projects is provided below. Simply copy and paste the configuration into a new wallaby.js configuration file in your project root directory.

module.exports = function (wallaby) {
  return {
    files: ['src/**/*', 'test/unit/*.js', 'package.json'],

    tests: ['test/**/*.spec.js'],

    env: {
      type: 'node'
    },

    compilers: {
      '**/*.js': wallaby.compilers.babel(),
      '**/*.vue': require('wallaby-vue-compiler')(wallaby.compilers.babel({}))
    },

    preprocessors: {
      '**/*.vue': file => require('vue-jest').process(file.content, file.path)
    },

    setup: function (wallaby) {
      const jestConfig = require('./package').jest || require('./test/unit/jest.conf')
      jestConfig.transform = {};
      wallaby.testFramework.configure(jestConfig)
    },

    testFramework: 'jest'
  }
}