trayio / babel-plugin-webpack-alias

babel 6 plugin which allows to use webpack resolve options
MIT License
150 stars 32 forks source link

Jest compatibility? #52

Open bkonkle opened 7 years ago

bkonkle commented 7 years ago

Hi! Thanks for sharing this project! I'm trying to use it with Jest, and running into trouble:

myproject-consumer-portal feature/test-architecture ✗ 3h26m △ ➜ yarn test
yarn test v0.24.6
$ jest
 FAIL  src/modules/client/ducks/flow/reducers.spec.js
  ● Test suite failed to run

    /Users/brandon/code/myproject-consumer-portal/src/modules/client/ducks/flow/reducers.spec.js: Unexpected token import

      at createScript (vm.js:53:10)
      at Object.runInThisContext (vm.js:95:10)
      at Module._compile (module.js:543:28)
      at Object.Module._extensions..js (module.js:580:10)
      at Module.load (module.js:488:32)
      at tryModuleLoad (module.js:447:12)
      at Function.Module._load (module.js:439:3)
      at Module.require (module.js:498:17)
      at require (internal/module.js:20:19)
      at PluginPass.CallExpression (node_modules/babel-plugin-webpack-alias/build/index.js:39:28)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        1.607s
Ran all test suites.
error Command failed with exit code 1.

I'm digging into the source trying to figure out how to work around it, but I don't have any good leads yet. If anyone has ideas, I'd love to hear them! :-)

My .babelrc:

{
    "presets": ["react", "es2015", "stage-1"],
    "plugins": [
        "add-module-exports",
        "jsx-display-if",
        "transform-class-properties",
        "transform-object-rest-spread",
        [ "babel-plugin-webpack-alias", { "config": "./tools/webpack/webpack.resolve.babel.js", "findConfig": true } ],
        "styletron-react"
    ]
}
giannif commented 6 years ago

@bkonkle did you ever figure this out?

giannif commented 6 years ago

I wound up using moduleNameMapper in the package.json:

  "moduleNameMapper": {
    "^shared/(.*)$": "<rootDir>/js/shared/$1"
  },
bkonkle commented 6 years ago

I ended up ditching aliases altogether, and going with lerna and a monorepo structure. :-)

feifanzhou commented 6 years ago

For people finding this issue:

Use this plugin only in your development env.

// Babel config
"env": {
  "development": {
    "plugins": [
      [
        "babel-plugin-webpack-alias",
        {
          "config": "./path.to.webpack.config"
        }
      ]
    ]
  }
}

Then use Jest's moduleNameMapper to reconfigure aliases for Jest.

allomov commented 5 years ago

moduleNameMapper expects to see module with index.js under mentioned path, still webpack's resolve.alias work in another way - it just substitutes file path to the imported file, so you don't need to have index.js under this folder.

At the moment I can't setup babel-plugin-webpack-alias for jest and can't use moduleNameMapper because of that.

allomov commented 5 years ago

Actually my problem was that I used babel@7, so switching to babel-plugin-webpack-alias-7 solved the problem for me. Details are here: https://github.com/trayio/babel-plugin-webpack-alias/issues/50