TypeScript, Browserify, and entryPatterns

[Merott]

I've already asked this on StackOverflow, but there isn't even a wallaby or wallabify tag on SO, so perhaps it'd be quicker to find an answer by posting here directly.

I am trying to get Wallaby to work with a TypeScript app, using Wallabify. However, when I run Wallaby, it outputs _No failing tests, 0 passing_, and all test indicators are grey.

The file app/spec.setup.ts is responsible for loading node modules dependencies such as chai, sinon, and the app's main module. app/spec.util.ts provides some helpers, imported by individual spec files.

module.exports = function() {
  var wallabify = require('wallabify');

  var wallabyPostprocessor = wallabify({
        entryPatterns: [
          'app/spec.setup.ts',
          'app/src/**/*.spec.ts'
        ]
      }
  )

  return { 
    files: [
      {pattern: 'app/spec.setup.ts', load: false, instrument: false},
      {pattern: 'app/spec.util.ts', load: false, instrument: false},
      {pattern: 'app/src/**/*.ts', load: false},
      {pattern: 'app/src/**/*.spec.ts', ignore: true}
    ],

    tests: [
      {pattern: 'app/src/**/*.spec.ts', load: false}
    ],

    testFramework: 'mocha',

    postprocessor: wallabyPostprocessor,

    bootstrap: function (w) {
      // outputs test file names, with .ts extensions changed to .js
      console.log(w.tests);

      window.__moduleBundler.loadTests();
    }
  };
};

What's interesting is that I don't get any feedback from changing entryPatterns, even setting it to an empty array or invalid file names. The result is still the same. Only if I remove it entirely, I get errors such as Can't find variable: sinon.

I've also figured that maybe the entryPatterns list may need the compiled file names, i.e. .js instead of .ts extension. However, when I do that, I get Postprocessor run failure: 'import' and 'export' may appear only with 'sourceType: module' on spec.setup.ts.

I don't know what is the correct way to configure Wallabify for TypeScript compilation, and I couldn't find any complete examples on the web, so I'd appreciate any hints.

[ArtemGovorov]

As you have spotted with the console.log in your bootstrap function, TypeScript compiler by default renames .ts files to .js. And because the compiler works before the wallabify postprocessor, when the latter tries to apply the supplied entry patterns to the renamed files - it finds nothing.

All you need to do to make it work is to change your entry pattern setting to be .js instead of .ts. I have created this sample repo with your file structure and working config and added it to the list of wallaby sample projects, have also added a note to the doc section about it.

Please let me know if the solution works for you.

[Merott]

Thanks, it worked!

I didn't get the other error about 'import' and 'export', which is strange since I don't know what else I changed. All is good now though, and thank you for the examples.