WallabyJS configuration

[eikster-dk]

Is your feature request related to a problem? Please describe. I spent yesterday trying to figure out how I could get WallabyJS to work with this great tool! Even tho the ng test works like a charm with a minimal jest.config file that only contains moduleNameMappers.

I had to extend the simplified jest.config to the following to get it to work. Most of it is taken from Angular + Jest + Wallaby

  globals: {
    'ts-jest': {
      tsConfigFile: './src/tsconfig.spec.json',
    },
    __TRANSFORM_HTML__: true,
  },
  setupTestFrameworkScriptFile: '<rootDir>/node_modules/@angular-builders/jest/src/jest-config/setup.js',
  transform: {
    '^.+\\.(ts|js|html)$': '<rootDir>/node_modules/jest-preset-angular/preprocessor.js',
  },
  testMatch: ['**/__tests__/**/*.+(ts|js)?(x)', '**/+(*.)+(spec|test).+(ts|js)?(x)'],
  moduleFileExtensions: ['ts', 'js', 'html'],

  moduleNameMapper: {
    //For avoid long imports with ...
    "app/(.*)$": "<rootDir>/src/app/$1",
    "@env/environment": "<rootDir>/src/environments/environment.ts",
  },
  transformIgnorePatterns: ['node_modules/(?!@ngrx)'],
  
  moduleFileExtensions: ['ts', 'tsx', 'js', 'json'],
  testPathIgnorePatterns: ['/node_modules/', '/dist/', 'src/app/*.{js}'],

Then I have the wallaby.js configuration looking like this

module.exports = function (wallaby) {
  return {
    files: [
      { pattern: 'tsconfig.json', load: false },
      { pattern: 'src/jest.config.js', load: false },
      { pattern: 'src/setupJest.ts', load: false },
      { pattern: 'src/tsconfig.spec.json', load: false },
      // { pattern: 'src/app/**/*.ts', load: true },
      { pattern: 'src/**/*.+(ts|html|json|snap|css|less|sass|scss|jpg|jpeg|gif|png|svg|js)', load: true },
      { pattern: 'test/**/*.ts', load: false },
      { pattern: 'spec-bundle-wallaby.js', load: false },
      { pattern: 'src/app/**/*.spec.ts', ignore: true },
      { pattern: 'src/app/**/*.d.ts', ignore: true },
    ],
    tests: ['src/app/**/*.spec.ts'],
    env: {
      kind: 'electron',
      type: 'node',
      runner: 'node'
    },
    testFramework: 'jest',
    setup: function (wallaby) {
      var jestConfig = require('./src/jest.config.js');
      // jestConfig.globals = { "__DEV__": true };
      
      // to allow moduleNameMapper to function probably..
      Object.keys(jestConfig.moduleNameMapper).forEach(k => (jestConfig.moduleNameMapper[k] = jestConfig.moduleNameMapper[k].replace('<rootDir>', wallaby.localProjectDir)))

      wallaby.testFramework.configure(jestConfig);
    },
    debug: true
  };
};

Most of it has been slightly modified from the original blog post as I couldn't get the code coverage to work within the components. So I removed the ngx-wallaby-jest npm package and completely let the processing up to angular-builder instead.

Describe the solution you'd like I would love to have some kind of configuration where Angular-builder is providing the final configuration of jest.config.js that can be provided to WallabyJS, so the configuration that runs during ng test and wallabyJS is the same.

Describe alternatives you've considered Non that I can think of right now

Additional context I think everything is provided to give a context but let me know if you need anything else.

Keep up the good work ❤️

If there is anything I can do to help, then ping me.. I might need some guidance but I'm able to help ou

[just-jeb]

As far as I understand there are two aspects here:

1. WallabyJs running ng instead of jest (otherwise the Angular CLI is not getting involved at all). It doesn't seem to be feasible now, as ng is not one of the supported testing frameworks.
2. Jest builder supporting any jest configuration that is required to make WallabyJs work. I don't see anything specific that is not generated right now.

So as far as I'm concerned it's rather a WallabyJs's issue than Jest builder's.

I understand that your request is different (providing a final config) but I believe the right approach is for WallabyJs to support ng. If I provide a way to "eject" the config with Jest builder then we'll get into the whole new spectrum of issues, such as configs out of sync (for example when you install a new version of Jest builder).
Besides, it will add some noise to the workspace (one of the reasons to have this builder is hiding the complexity and config files).

What do you think?

[just-jeb]

Is this still relevant with their zero config option?

[selangley-wa]

WallabyJS currently requires you to use the wallaby-webpack plugin and create a manual wallabyjs configuration file in order to work with custom-webpack:karma as described here:

https://github.com/wallabyjs/public/issues/2406