example of wallaby + vue + ava + typescript configuration
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
public
src
tests
.gitignore
.postcssrc.js
babel.config.js
jest.config.js
package-lock.json
package.json
readme.md
tsconfig.json
tslint.json
wallaby.config.js

readme.md

Vue + Wallaby + AvA + Typescript installation instruction

if you neet configuration without Typescript, go here

requirements: @vue/cli 3

1. create app with unit/jest + typescript preset

| you need it, otherwise AvA cant compile your vue files

if you not initialized your app with tests before, you can do it by:

vue add @vue/unit-jest

2. Install wallaby-vue-compiler && browser-env

npm install -D wallaby-vue-compiler browser-env

3. Install @zeit/next-typescript preset for babel (original babel-preset-typescript not working)

npm install -D @zeit/next-typescript

4. create wallaby config

module.exports = function wallabyConfig(wallaby) {
  process.env.VUE_CLI_BABEL_TRANSPILE_MODULES = true;

  const compiler = wallaby.compilers.babel({
    presets: ['@zeit/next-typescript/babel'],
  });
  const jestConfig =
    require('./jest.config.js') || require('./package.json').jest;

  return {
    files: ['src/**/*', 'package.json'],
    tests: ['tests/**/*.test.ts'],
    testFramework: 'ava',
    setup: () => {
      require('browser-env')();
      const Vue = require('vue');
      Vue.config.productionTip = false;
    },
    compilers: {
      '**/*.js': compiler,
      '**/*.ts': compiler,
      '**/*.vue': require('wallaby-vue-compiler')(compiler),
    },
    preprocessors: {
      '**/*.vue': file =>
        require('vue-jest').process(file.content, file.path, jestConfig),
    },
    env: { type: 'node', runner: 'node' },
  };
};

5. Everything is almost done, just install AvA

npm install -g npx
npx create-ava --next

And you ready to go!

Example in tests/ folder