WallabyJs + Mocha + Webpack configuration

DanielOrmeno commented 6 years ago

Issue description or question

I'm having a bit of a hard time getting the wallaby.js configuration right. I'm working on a Nuxt app using typescript. I've tried a few different permutations of the suggested configurations based on the examples but I haven't been able to get wallabyjs to correctly process typescript with custom decorators (inversifyjs).

Any further feedback on my test setup is more than welcome.

Note: this works

npm run test

Running wallaby with my current configuration throws:

Error: Cannot find module 'C:\Users\DanielO\.vscode\extensions\wallabyjs.wallaby-vscode-1.0.90\projects\3cbb26122a204b9d\instrumented\test\hd\core\configuration\hd.config.spec.js'
SyntaxError: Expected token ')'
  at test/hd/core/configuration/hd.config.spec.ts:10:4
Error: Cannot find module '.\test\hd\core\configuration\hd.config.spec.js'
at http://localhost:55253/wallaby-webpack.js?1530165748761:1
Module not found: Error: Can't resolve '../../../../@hd/core/configuration/index' in '.\test\hd\core\configuration'ModuleNotFoundError: Module not found: Error: Can't resolve '../../../../@hd/core/configuration/index' in '.\test\hd\core\configuration'

Looks like the typescript files are being processed but then wallaby js tries to run the related js file.

Repo

https://github.com/DanielOrmeno/WallabyJs-Issue

Code editor or IDE name and version

Visual Studio Code (latest)

OS name and version

Windows

ArtemGovorov commented 6 years ago

Thanks for putting together the sample repo. The following config should work for your setup. I have also sent you the pull request with it.

module.exports = function wallabyConfig(wallaby) {
  return {
    files: ['@hd/**/*.ts'],
    tests: ['test/**/*.spec.ts'],
    compilers: {
      '**/*.ts?(x)': wallaby.compilers.typeScript({
        module: 'commonjs'
      })
    },
    preprocessors: {
      '**/*.vue': file => require('vue-jest').process(file.content, file.path),
    },
    setup: () => {
      require('browser-env')();
      const Vue = require('vue');
      Vue.config.productionTip = false;
    },
    env: { type: 'node', runner: 'node' },
  };
};

DanielOrmeno commented 6 years ago

Perfect thanks a lot @ArtemGovorov . Looks like the config was much simpler than what I was going for.

DanielOrmeno commented 6 years ago

Hi @ArtemGovorov. I'm now having some issues with loading .vue files with typescript scripts. I've been reading through the existing issues and I can see that wallaby currently does not support coverage for .vue files with lang=ts. However for what I understand I should still be able to import these files to run tests on the component's vm. Is this correct?

I'm currently not importing the .vue files in the wallaby.js, but when I import them into my tests I get the following error:

Error: Cannot find module '~/components/item/hd-item.vue'
  at Object.<anonymous> test/components/item/item.spec.ts:5

I've tried a few of the suggested solutions like the config here, #1533 and #1415 with no luck. I've updated the original sample on this issue to reflect the error.

Should I open a new question for this?

Thanks again for all the help/.

ArtemGovorov commented 6 years ago

I've updated the original sample on this issue to reflect the error.

Which one? I have just checked the repo you've shared originally - https://github.com/DanielOrmeno/WallabyJs-Issue, and it hadn't been updated.

DanielOrmeno commented 6 years ago

sorry @ArtemGovorov , it should be udpated now.

ArtemGovorov commented 6 years ago

@DanielOrmeno Sent the pull request to make it work https://github.com/DanielOrmeno/WallabyJs-Issue/pull/2. Basically the only required change to make it work was to uncomment components paths in your files because wallaby needs to know about all files it needs to instrument. Also the used vue-jest preprocessor was missing in devDependencies. However, I have added a couple more changes so that you'd get code coverage in your .vue files as well (to achieve that, the files script content is compiled with babel Typescript).

DanielOrmeno commented 6 years ago

Well that's embarrassing hahaha. I was loading those files at one point but I must have been trying one of the other configurations as It was having issues understanding the decorators and typescript in general. Apologies, I should have worked this out before asking you to spend time on this. I'll have a play and hopefully this will be the last time I nag you with these types of issues.

Thanks again for the great support and feedback.

wallabyjs / public