[Req] Better webpack typescript config support

[luchillo17]

Hi there, for the last 2 days i've trying to make Wallaby,js, Webpack & TypeScript work, it's been an odyssey, but at the end i got stuck in the part of trying to use the existing Webpack config file of the project, though i have to override the aliases for the cache of Wallaby, i keep getting errors and some other issues around seems to say that i have to remove some variables from the config before passing them to Wallaby-Webpack.

So what's the issue? i can't find anything about that requirement, like what i have to delete, what variables are incompatible, i know the rules is one of them in Webpack 4, but all of them? or just filter some like the TypeScript loader?

So in basic terms it would help a lot to know which of the properties of the webpack config we need to remove to make it work with Wallaby-Webpack, and specify it in the webpack config, or even better, create a function that removes/overrides those before passing it to the Wallaby-Webpack core.

[ArtemGovorov]

If you create a sample repo demonstrating the issue(s), we are happy to take a look and help with the config.

From the information you have provided, sounds like only TypeScript loader/rule should be removed. Whether to remove/change other things from your Webpack config largely depends on your config. You may find some notes in our Webpack docs, however normally you'd just need to remove things that duplicate what Wallaby is already doing with compilers/code coverage.

[luchillo17]

The issue we're seeing right now is that we cannot use the current config, it's not my project so it will take some time to get the Webpack config to show here, but we tried without the config file and we got as far as the typescript compiler screaming for ENV variables like PRODUCTION, which are set up in Webpack but i can't find any docs for the same in the wallaby typescript compiler, where do i look for that?

[ArtemGovorov]

Wallaby TypeScript compiler doesn't use any ENV variables, so I'm not sure what is going on. Since you are not using your webpack config anyway, perhaps you can create and share a sample repo demonstrating the issue(s) with TypeScript compiler? We are happy to take a look and help with config.

[luchillo17]

I'm talking variables passed to the Define Plugin or the Environment Plugin.

[ArtemGovorov]

You then need to pass the plugin(s) to wallabyWebpack the same way you do it in your webpack config:

var wallabyPostprocessor = wallabyWebpack({
    ...
    plugins: [
     ...
    ]
  }
);

[rogueITman]

@ArtemGovorov are you able/willing to do a quick zoom session to look at the projects webpack config. The project is proprietary also im not sure how to produce the minimum req webpack config to reproduce the issue. However your understanding of wallaby-weback requirements and what it needs to run may only take you a quick minute to identify what is necessary.

[ArtemGovorov]

@rogueITman Unfortunately we don't do remote sessions. We have tried it before and it had proved to be inefficient in troubleshooting configuration issues, because in 100% of cases we've tried, we have still needed a sample repo.

Creating a sample project with bits and pieces from your webpack config should be pretty straightforward though. If you don't like to share it publicly, please feel free to send the repo to hello@wallabyjs.com.

[luchillo17]

Hey thanks for all the help, the plugins part was the final touch along with changing the version of Jasmine, its working now.

What we have now that works different is that karma tests report success while Wallaby.js says toEqual doesn't match because of an undefined property in an object, not part of this issue but maybe you know why?

I suspect karma config is replacing the toEqual function with another that is more lax with the undefined properties, any ideas?

[ArtemGovorov]

The new issue is unlikely to be related to the toEqual implementation. From the error description, it sounds like the object being used in the assertion is missing a property.

Could you please share a detailed example of such error?

[luchillo17]

Something like this happens:

const expectedObj = { a: 1, b: 2};
const objectResultOfFunction = { a: 1, b: 2, c: undefined};
expect(objectResultOfFunction).toEqual(expectedObj);

With the code above, the Wallaby result is that they are not equal, but karma with jasmine says they are equal and let's the test pass when it should fail.

Is either toEqual being to lax, or expect doing something to the object before passing it to toEqual, and the karma.setup.js seems to be using the Jest expect to replace the jasmine one, so maybe that's the issue?

[ArtemGovorov]

karma.setup.js seems to be using the Jest expect to replace the jasmine one, so maybe that's the issue?

Can you please share the karma.setup.js file? If there's some script that is replacing/extending Jasmine's matchers, you'll need to include it in your files list (with load: true if the script is not being Webpack-ed).

[luchillo17]

Here it is, look at line :27, that's where i think expect is being overwritten with the jest one:

[rogueITman]

We are trying to import module from NPM but Sandbox error states it cannot be found.

[luchillo17]

We tried using require to see if it was because of the ES6 imports but it says require is not defined.

[ArtemGovorov]

You need to create a separate file, like wallaby.setup.js (similar to your karma setup, but without hacks required for karma), and specify the file as an entry pattern in your entryPatterns wallaby webpack setting:

  ...
  var webpackPostprocessor = wallabyWebpack({
    entryPatterns: [
+      'wallaby.setup.js',
+      'src/**/*spec.js' // whatever your spec files pattern is, but with .js extension!
    ],

    ...

return {
    files: [
+      'wallaby.setup.js',
      ...

wallaby.setup.js

import ... from 'jest-jasmine2/jasmine_async'
...
function installJestExpect() {...}

installJestExpect()