Webpack.resolve.alias parameters ignored during tests

[danielesalvatore]

I would like to add a testing framework to the library I am working on.
In order to do so, I refactored my library and I introduced webpack and karma-webpack to built it and test it.
The building process is working fine, but I cannot make the dependencies path resolution work during the test process phase.

The final goal of the refactoring is to have a optimized version of the library that do not include 3rd party libs in it, with the testing framework that reports the coverage state of the tests.
Given that I am quite new with this new technology any feedback/suggestion aside the issue itself is really appreciated.

Current behavior:
When the lib is built using webpack each dependency is correctly resolved based on webpack.resolve.alias params, when the tests run the webpack.resolve.alias params are ignored and the resolution fails.

Error:

Chrome 52.0.2743 (Linux 0.0.0) ERROR
  Uncaught Error: Cannot find module "__config/config"
  at src/js/bridge.js:49

Project repo: https://github.com/FENIX-Platform/fenix-ui-bridge

Commands:

• npm install to install the project's 3rd party libraries
• npm run build to run internally webpack and build the dist folder
• npm test to run the tests

Webpack version: 1.13.2
Webpack Karma version: 1.8.0
Karma version: 1.2.0
Environment:: Linux
Browser: Chrome Version 52.0.2743.116 (64-bit)

[MikaAK]

@danielefenix i can't even find a karma.config.js in your repo. I don't think you have it set up properly.

[danielesalvatore]

Hi @MikaAK, thank you for your reply.

Do not consider that repository but consider the following repository instead:
https://github.com/FENIX-Platform/fenix-ui-filter and checkout the feature/Feature-webpack.
I am struggling now with the following error:

Chrome 52.0.2743 (Linux 0.0.0) ERROR
  Uncaught ReferenceError: define is not defined
  at /home/daniele/Desktop/fenix-ui-filter.git/test/specs.js:1

when i try to run the npm t script.
As reference for the other supported script please take a look of the README file.

Every comments or support are really appreciated. Thanks

[MikaAK]

This seems like config issues

[jmcgoldrick]

Sorry for the +1, but I am having the same problem, resolve.alias is seemingly being ignored.

[jmcgoldrick]

Quick update, it was a config issue on my end, in my case resolve.alias was being correctly applied, but the path was incorrect (found by logging out the webpackOptions in karma-webpack.js) when running through karma - simply updating the alias path and all was right in the world!

[MikaAK]

Closing as this was config issues. @danielefenix feel free to reopen for the other issue if you deem necessary but it seems like a config issue.

[aghreed]

@jmcgoldrick I'm curious how your alias path in the karma.conf.js needed to be updated. I've been experiencing this same problem, but as far as I can tell my configuration is setup correctly. For context, the karma.conf.js and webpack.config.js files are siblings located in the same directory. Here's what I've got for the stuff that matters:

// karma.conf.js webpack options
    webpack: {
      module: {
        loaders: [
          {
            test: /\.js$/,
            include: [
              path.join(__dirname, 'client'),
              ...
           },
           ...
        ]
      },
      watch: true,
      resolve: {
        extensions: ['', '.js', '.es6'],
        alias: {
          'interceptor': path.resolve(__dirname, 'client/src/util/interceptor.js')
        }
      }
    },

// webpack.config.js resolve options
  resolve: {
    extensions: ['', '.js', '.es6'],
    alias: {
      'interceptor': path.resolve(__dirname, 'client/src/util/interceptor.js')
    }
  }

When I open up the karma-webpack.js file and log out webpackOptions, the path that is there for interceptor is correct. I can copy and paste the path into my browser and it will pull up the correct file on my file system.

I have no issues with the resolve.alias in the normal webpack builds, only when trying to run karma do I get a bunch of cannot read property 'handleUnauthorizedResponse' of undefined messages (handleUnauthorizedResponse is a function default exported from interceptor) and the alias'd file (interceptor) seems to be undefined.

Any advice or ideas are welcome and greatly appreciated. I'm kinda stumped on this one at the moment.

[jmcgoldrick]

Hey @aghreed, everything in your two configs seems like it is correct and the resolve.alias in webpackOptions being correct has me thinking it must be something else...

In my scenario I was getting "module ... not found errors" are you getting those? It seems like your resolve.alias is working but something else is playing up.

What does your karma-test-shim file look like? Mine is almost identical to that listed on the Angular docs site.

I'm also not using any default exports, so for me it would be import { handleUnauthorizedResponse } from "interceptor" but I don't see why that would be a problem..

[spinlock99]

I'm having a similar issue with resolve.alias. In my case, I'm seeing:

ERROR in [default] /Users/spinlock/Handshake/handshake/frontend/tests/components/documents/index.spec.tsx:8:33
Cannot find module 'frontend/components/documents/reducers'.

but the spec in that file is green when karma actually runs it.

Is it possible that this is an issue with the order of preprocessors in my karma.conf?

[davscro]

Hm I also had the same problem, in my office I'm using Windows and everything was fine there, but at home on my Mac I started tests and got the same error
Node.js (darwin; U; rv:v4.6.0) AppleWebKit/537.36 (KHTML, like Gecko) ERROR Cannot find module "common/containers/HeaderContainer"
and my conf was:

resolve: {
                alias: {
                    sinon: 'sinon/pkg/sinon.js',
                    common: path.join(__dirname, '/common/'),
                    test: path.join(__dirname, '/test/'),
                    server: path.join(__dirname, '/server/'),
                    mocks: path.join(__dirname, '/mocks/')
                },
                extensions: ['', '.js', '.jsx', '.json']
            }

So I thought there is something wrong because of different OS and voila I started my tests with sudo:

sudo npm run tests and everything was OK. I'm not sure is this related with the issue but in my case sudo helps.