-
Notifications
You must be signed in to change notification settings - Fork 1.4k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Recipe for using AVA with Webpack aliases #1011
Comments
I'm not familiar with Webpack, but it's not something AVA itself should be concerned about. You're using Webpack to add non-standard functionality (aliasing) to Can anyone with Webpack experience comment here? We should really have a recipe for using Webpack with AVA. // @istarkov |
Yes babel-plugin-webpack-loader could be used to resolve such imports All aliases in @apedyashev example could be changed on just one modulesDirectories entry.
|
Thank you, guys for your help. It seems to work with following configs: config/webpack.config.ava.js const path = require('path');
const PATHS = {
app: path.resolve(__dirname, '../src'),
};
module.exports = {
resolve: {
modulesDirectories: [
__dirname,
'node_modules',
PATHS.app,
]
},
module: {
loaders: [
{
test: /\.css$/,
loader: 'style-loader!css-loader?modules&importLoaders=1!postcss-loader',
},
]
}
}; package.json {
....
"scripts": {
"test": "CONFIG=$(pwd)/config/webpack.config.ava.js BABEL_DISABLE_CACHE=1 NODE_ENV=AVA ava"
},
....
"ava": {
"files": [
"src/**/*.spec.js"
],
"require": [
"babel-register"
],
"babel": "inherit"
}
} .babelrc {
"presets": ["es2015", "react", "stage-1", "stage-0"],
"env": {
"AVA": {
"plugins": [
[
"babel-plugin-webpack-loaders",
{
"config": "${CONFIG}",
"verbose": false
}
]
]
}
}
} |
Tnx @apedyashev !! This should be in a recipe! |
I put together a slightly different approach to this problem https://github.com/greyepoxy/webpack-ava-recipe. Where I use webpack as a pre-compile step for my tests before feeding them to Ava. Curious what people think, is it better/worse then @apedyashev 's approach? Happy to put a recipe together if people think it is useful. |
Btw, I have another solution of my problem (without using webpack):
|
I implemented what I think is the easiest and cleanest approach without any pre-compile step as webpack-loaders seems like a dirty hack to begin with that didn't even work for me outside of using import { join, dirname } from 'path';
import nhf from 'node-hook-filename';
import pug from 'pug';
nhf(['.scss']);
nhf(['.pug'], (path, parent) => pug.compileFile(join(dirname(parent.id), path))); |
@greyepoxy Dude, this was a life-saver. I think this should be added as a recipe. Also, I found this library, which removes the need for the manual code you have here. |
I use Webpack in my app and I defined aliases in config:
webpack.config.dev.js:
And I import modules like so:
componts/LoginPage.js
instead of
But AVA doesn't allow to define aliases, so I'm unable to test componts/LoginPage.js with AVA since it throws that error:
Is there a solution?
The text was updated successfully, but these errors were encountered: