Using webpack aliases in AVA tests - javascript

I need to include the aliases from webpack into AVA when it runs.
I used webpack's resolve.alias to access all the files under src folder:
webpack.config.js
resolve: {
alias: {
'#': path.resolve(__dirname, 'src/'),
},
},
and then that # special prefix for my own modules like this:
my-module.js
import main from '#/view/main'
This is my AVA configuration:
package.json
"scripts": {
"test-unit": "ava test/unit"
},
"ava": {
"require": ["esm"]
},
Is possible to add something to package.json like in this mocha solution?
https://stackoverflow.com/a/42989394/12361834
Thank you so much for your time and help!

If I understood you well you can do it with link-module-alias npm package.
Add this to your package.json:
"scripts": {
"postinstall": "link-module-alias",
"preinstall": "command -v link-module-alias && link-module-alias clean || true"
"test": "ava"
},
"_moduleAliases": {
"#": "src"
}
npm i && npm test
If you need further details you can download a working example here.

Related

Cannot find module with **/*.test.js

I'm trying to set up testing for my Next.js project. I want to test it with RITEway which is based on tape. I want a test command that finds all files in my src/ folder that end with .test.js.
Here is the commend I came up with:
"test": "NODE_ENV=test node -r #babel/register src/**/*.test.js",
I get the error:
Error: Cannot find module '/path/to/project/src/**/*.test.js'
How can I tell node to find all files ending in .test.js in my src/ folder?
Extra context:
My testing files live in src/features/<feature>/<feature.test.js>, e.g.:
"test": "NODE_ENV=test node -r #babel/register src/features/home/home-page-component.test.js",
Works to find a single file and run it.
"test": "NODE_ENV=test node -r #babel/register src/**/**/*.test.js",
Works to find all folders in features, but ignores files like src/<file>.test.js, which I also want to run.
I had to install #babel/register and #babel/core for Node to process absolute imports and newer syntax.
My .babelrc is:
{
"env": {
"test": {
"plugins": [
[
"module-resolver",
{
"root": [
"."
],
"alias": {
"features": "./src/features"
}
}
]
]
}
},
"presets": [
[
"next/babel"
]
],
"plugins": []
}
As Jon Sharpe said, you have to feed the regex into riteway.
"test": "NODE_ENV=test riteway -r #babel/register 'src/**/*.test.js'",

Mocha ignores existing .mocharc.js config file

Here is my "scripts" section of package.json:
"scripts": {
"pretest": "eslint \"**/*.js\" --ignore-pattern node_modules/",
"test": "mocha"
}
and here is my .mocharc.js:
'use strict';
module.exports = {
diff: true,
extension: ['js'],
package: './package.json',
reporter: 'landing',
slow: 75,
timeout: 2000,
ui: 'bdd',
watchFiles: ['src/tests/*.js', 'src/tests/**/*.js'],
};
When running npm test I get pretest running correctly, but mocha seems to ignore config file. Haven't seen the issue anywhere yet.
Try running Mocha with --config options.
Example: mocha --config .mocharc.js
And your watchFiles option is wrong. It should be watch-files.
See this mocha example: https://github.com/mochajs/mocha/blob/master/example/config/.mocharc.js
Try adding the following to your .mocharc.js
recursive: true

How to set env in package.json which is used within .bablerc

I am trying to run Jest tests as part of a script before I then run webpack, like this.
npm run test
webpack --progress --profile --watch --mode development
Jest only works with compiled code, so I had set my .babelrc to the following, which worked, however then it transpiled all my code in webpack which I didn't want, in development mode I want to leave the JavaScript un-transpiled so I can work with it without it being obfuscated.
{
"presets": [ "#babel/preset-env" ]
}
Instead I want to run Jest by calling 'npm run test' which then I can specify only that script transpiles the code and then webpack runs without transpiling, I was hoping something like this in my .babelrc file
{
"env": {
"test": {
"presets": [ "#babel/preset-env" ]
}
}
}
Then in my package.json I could set the env to test which then would leave webpack alone.
"scripts": {
"test": "SET env=test&& jest --config jest.config.js"
}
With this setup I still get the following message appearing when 'npm run test' runs which shows the babelrc file isn't being hit.
Jest encountered an unexpected token
This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.
Can anyone help?
So turns out my test was ok in the .babelrc file
{
"env": {
"test": {
"presets": [ "#babel/preset-env" ]
}
}
}
And the script needed in my package.json was this without setting any node env
"scripts": {
"test": "jest --config jest.config.js"
}
It was actually my webpack script that wasn't configured correctly, I needed to add '--env.NODE_ENV=development' at the end
webpack --progress --profile --watch --mode development --env.NODE_ENV=development
Which could then be checked within my webpack.config file.
module.exports = (env) => {
const isDevelopment = env && env.NODE_ENV === 'development';
...
then in my rules test for isDevelopment
rules: [{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: isDevelopment ? {} : { presets: ['#babel/preset-env'] }
}
},

Cannot find module 'path'

I'm attempting to learn Typescript and thought I should also make my webpack config in .ts. This is my webpack.config.ts:
import * as webpack from 'webpack';
import * as path from 'path';
const config: webpack.Configuration = {
entry: path.resolve('src/main.ts'),
module: {
rules: [
{
test: /\.tsx?$/,
use: 'ts-loader',
exclude: /node_modules/
}
]
},
resolve: {
extensions: ['.tsx', '.ts', '.js']
},
output: {
filename: 'index.js',
path: path.resolve( 'dist')
}
}
export default config;
As well as my package.json:
"main": "index.js",
"scripts": {
"prebuild": "rimraf dist",
"build": "webpack --config devtools/webpack.config.ts --display-error-details",
"post-build": "webpack-dev-server --config devtools/webpack.config.ts --mode development"
},
"author": "",
"license": "ISC",
"devDependencies": {
"ts-loader": "^4.0.1",
"ts-node": "^5.0.1",
"typescript": "^2.7.2",
"webpack": "^4.1.1",
"webpack-cli": "^2.0.12",
"webpack-dev-server": "^3.1.1"
}
}
The error I get when running npm run build is:
TS2307: Cannot find module 'path'
I have also tried requiring path, but then I get a different error saying it cant find module require.
What seems to be the issue?
This should help
npm i #types/node -D
Typescript needs typings for any module, except if that module is not written in typescript.
Using
"types": ["node"]
in tsconfig.json as mentioned in the comments, solved the issue for me.
I had to do all this
[VS Code][Terminal] upgrade typescript: npm i typescript/#latest -g
[VS Code][Terminal] install node types: npm i #types/node --save-dev
[VS Code][tsconfig.json] add types: "compilerOptions": {types:["node"]}
[VS Code][Explorer] delete package-lock.json and node_modules
[VS Code][Terminal] install: npm install
[VS Code] Restart VS Code
[VS Code][Terminal] test: tsc
Try using require syntax rather than import & change webpack.config.ts to the following code
webpack.config.ts
const webpack = require('webpack');
const path = require('path');
const config: webpack.Configuration = {
entry: path.resolve('src/main.ts'),
module: {
rules: [
{
test: /\.tsx?$/,
use: 'ts-loader',
exclude: /node_modules/
}
]
},
resolve: {
extensions: ['.tsx', '.ts', '.js']
},
output: {
filename: 'index.js',
path: path.resolve( 'dist')
}
}
module.exports = config;
And then run npm run build
First of all no need of .ts extension for webpack config file. Its just internal purpose for building the bundle. Use normal .js file.
Webpack is not ran by browser, its by Node Js which runs webpack module and make bundle as per config.
Now Node Js understand its own module system is which is require
So it would be like below: require in below is Node Js module importing syntax.
const webpack = require('webpack');
const path = require('path');

Node.js + Typescript + Webpack = Module not found

I'm new with Webpack, Node.js and Typescript and I'm having trouble configuring my dev enviroment.
When running webpack to compile my src/server.ts to generate the /server/bundle.js I'm getting this error:
ERROR in ./src/server.ts
Module not found: Error: Can't resolve 'hapi' in '/Volumes/Dados/giovane/dev/studio-hikari/nodang/nodang-api/src'
# ./src/server.ts 3:11-26
The architecture of the project is:
The src/server.ts:
import * as Hapi from 'hapi';
const server = new Hapi.Server();
The webpack.config.js:
const path = require('path');
module.exports = {
entry: './src/server.ts',
output: {
filename: './server/bundle.js'
},
resolve: {
extensions: ['.ts'],
modules: [
path.resolve('src'),
path.resolve('node_modules')
]
},
module: {
loaders: [
{
test: /.ts$/,
loader: 'awesome-typescript-loader'
}
]
}
};
The package.json:
{
"name": "nodang-api",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"compile": "webpack --progress --watch",
"serve": "node-dev server/bundle.js"
},
"author": "",
"license": "ISC",
"dependencies": {
"#types/hapi": "^16.0.0",
"lodash": "^4.17.4"
},
"devDependencies": {
"awesome-typescript-loader": "^3.0.8",
"tsd": "^0.6.5",
"typescript": "^2.2.1",
"webpack": "^2.2.1"
}
}
OBS: It's webpack 2
UPDATE
After installing hapi and adding .js to webpack's resolve extentions and node as webpack's target I'm getting this erros with hapi modules:
ERROR in ./~/hapi/lib/server.js
Module not found: Error: Can't resolve 'catbox' in '/Volumes/Dados/giovane/dev/studio-hikari/nodang/nodang-api/node_modules/hapi/lib'
# ./~/hapi/lib/server.js 5:15-32
# ./~/hapi/lib/index.js
# ./src/server.ts
ERROR in ./~/hapi/lib/server.js
Module not found: Error: Can't resolve 'catbox-memory' in '/Volumes/Dados/giovane/dev/studio-hikari/nodang/nodang-api/node_modules/hapi/lib'
# ./~/hapi/lib/server.js 6:21-45
# ./~/hapi/lib/index.js
# ./src/server.ts
You did not install hapi. #types/hapi are just the type definitions that TypeScript uses for the library, but not the actual library itself. So you need to add hapi as well:
npm install --save hapi
Once you've installed it, the module can be found, although you'll get a new error that ./server could not be resolved in hapi/lib/index.js and that's because you configure resolve.extensions to only include .ts, but the library makes use of Node automatically resolving .js when leaving off the extension. So you also need to include .js in the extensions:
extensions: ['.ts', '.js'],
After also resolving this issue, you'll be faced with another one, namely that Node built-in modules like fs can't be resolved. By default webpack builds for the web, so the Node built-in modules are not available. But you can change that by setting the target option in your webpack config to node:
target: 'node'
Edit
You're having trouble with other node_modules because you only use the top level node_modules, instead you want to always fall back to the regular module resolution of node_modules, so the resolve.modules should look like this:
modules: [
path.resolve('src'),
'node_modules'
]

Categories