My npm package build runs with babel and I configured a babel preset in my package.json with
"babel": { "presets": ["es2015"] }
I also configured a mocha test script with
"test": "mocha --compilers js:babel-core/register"
However, I would like to run my tests using a different babel preset than that one specified for my build.
Is it possible? I would you achieve that?
Babel accommodates environment variables so you could set a test environment variable and alter your presets accordingly:
In your package.json:
"babel": {
"env": {
"test": {
"presets": [/* your test presets */]
}
},
"presets": [/* your usual presets */]
}
Then, run your mocha command like so:
"test: BABEL_ENV=test mocha --compilers js:babel-core/register"
You could create a file named babel-hook.js and put in it:
require("babel-register")({
presets: [ /* whatever values you want here */ ],
});
then run Mocha like this:
mocha --require babel-hook
This will register Babel and you can use any configuration option you want with it, separate from anything in package.json.
The answer about configuring babel in package.json was partially ok.
I needed to add seperate env entries to make it work cause otherwise the config outside env would always run.
So the final configuration example would look like this:
"babel": {
"env": {
"test-console": {
"presets": ["#babel/preset-env"],
"plugins": ["#babel/plugin-proposal-class-properties"]
}
,
"test": {
"presets": ["#babel/preset-env"],
"plugins": ["#babel/plugin-proposal-class-properties", "transform-remove-console"]
}
}
And scripts:
"scripts": {
"test-console-log": "BABEL_ENV=test-console mocha || TRUE",
"test": "BABEL_ENV=test mocha || TRUE"
}
Related
I'm updating a private node_module that we install in projects via bitbucket. The package has some overrides that get bundled up via webpack and that bundle is used directly (i.e. outside of the build tools used for the project I'm installing the module for).
I would like to fire the module's build command as a postinstall script so that when we install or update the module in the main project the bundle is rebuilt.
In the module's package.json I have this:
"scripts": {
"build": "webpack",
"dev": "webpack --watch",
"serve": "webpack-dev-server",
"postinstall": "npm run build"
},
and I have the following webpack.config.js file:
const path = require("path")
module.exports = {
mode: "development",
watch: false,
entry: "./src/index.js",
output: {
filename: "bundle.js",
path: path.resolve(__dirname, "dist"),
},
devServer: {
contentBase: "dist",
},
module: {
rules: [
{
test: /\.js/,
exclude: /(node_modules)/,
use: {
loader: "babel-loader",
options: {
presets: ["#babel/preset-env"],
},
},
},
],
},
}
And I've confirmed that firing npm run build works just fine in the modules codebase, but when I go to update the module in the main codebase I get errors:
Webpack is blowing up on the option chaining which I thought would be handled by the babel loader in the module's webpack config.
I double checked my module's package.json file and it definitely has babel's presets in the regular dependencies and not the dev dependencies (i.e. it gets installed as part of the module install).
Am I doing something wrong here? It seems like if the same build process works
Make sure your exports in the package.json points to the sources in the dist:
"exports": {
".": "./dist/bundle.js"
},
https://nodejs.org/api/packages.html#package-entry-points
When run locally, it seems to work fine but crashes when its on pipeline
EDIT: After removing npx, it produces a different error:
I have followed the advice of installing the plugin:
npm install eslint-plugin-react#latest --save-dev
But seeps to repeat itself.
Here's my retracted bitbucket-pipelines.yml config:
- step:
name: CI
caches:
- node
script:
- npm install
- npm run lint
- npm run test
eqautes to package.json
"lint": "eslint --ext .js,.ts,.tsx src --ignore-pattern node_modules/",
"test": "jest --verbose --colors --coverage",
Here's my eslint config file:
{
"env": {
"browser": true,
"es6": true,
"jest": true
},
"extends": [
"eslint:recommended",
"plugin:react/recommended",
"airbnb"
],
"globals": {
"Atomics": "readonly",
"SharedArrayBuffer": "readonly"
},
"parser": "#typescript-eslint/parser",
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": 2018,
"sourceType": "module"
},
"plugins": [
"react",
"#typescript-eslint"
],
"settings": {
"import/resolver": {
"node": {
"extensions": [".js", ".ts", ".tsx"],
"paths": ["src"]
}
}
},
"rules": {
...
}
}
}
An update to Visual Studio Code fixed this for me.
I was unwittingly on a 2 year old version.
Fixed it by removing NODE_ENV in pipelines's .env due to this:
npm install (in package directory, no arguments):
Install the dependencies in the local node_modules folder.
In global mode (ie, with -g or --global appended to the command), it
installs the current package context (ie, the current working
directory) as a global package.
By default, npm install will install all modules listed as
dependencies in package.json.
With the --production flag (or when the NODE_ENV environment variable
is set to production), npm will not install modules listed in
devDependencies.
NOTE: The --production flag has no particular meaning when adding a
dependency to a project.
it happened to to.
tried hard to find the answer.
Apparently, eslint searchs for a roots in the working directory, or something like that, to find the modules to import.
It happens that i've had two apps in my project folder, and only one had the eslintrc.josn.
I fixed to use eslint on the entire project oppening the vs settings.json and add the following:
"eslint.workingDirectories": ["./app1","./app2"...]
if u have more than one app on ur project folder, u should try it
For a library written in ES6/7, I want to compile (to ES5) the library to a dist/ folder. I also want to run the tests (written in ES6/7) for this lib.
My dev dependencies look like this (package.json):
"devDependencies": {
"#babel/cli": "^7.4.4",
"#babel/core": "^7.4.5",
"#babel/preset-env": "^7.4.5",
"#babel/register": "^7.4.4",
"chai": "^4.2.0",
"mocha": "^6.1.4",
"sinon": "^7.3.2"
},
My build and test scripts looks like this (package.json):
"scripts": {
"test": "mocha --require #babel/register",
"build": "babel src -d dist --presets=#babel/preset-env"
},
Running npm run build works well. The dist/ folder gets populated with transpiled files.
Running npm run test does not seem to work - this is my problem.
> mocha --require #babel/register
/Users/dro/Repos/lib/node_modules/yargs/yargs.js:1163
else throw err
^
ReferenceError: regeneratorRuntime is not defined
Initially I got an import error, which was resolved by adding .babelrc file.
Below is my .babelrc file content.
{
"presets": ["#babel/preset-env"]
}
I was reading about regeneratorRuntime and it got me to this link about babel-polyfill where they explain I shouldn't need that polyfill.
This will emulate a full ES2015+ environment (no < Stage 4 proposals) and is intended to be used in an application rather than a library/tool.
What is needed to set this up properly?
I am not using webpack.
Testing in ES6 with Mocha and Babel 7. Look here: https://dev.to/bnorbertjs/my-nodejs-setup-mocha--chai-babel7-es6-43ei or http://jamesknelson.com/testing-in-es6-with-mocha-and-babel-6/
npm install --save #babel/runtime
npm install --save-dev #babel/plugin-transform-runtime
And, in .babelrc, add:
{
"presets": ["#babel/preset-env"],
"plugins": [
["#babel/transform-runtime"]
]
}
Look at the project documentation:
npm install --save-dev babel-register
In your package.json file make the following changes:
{
"scripts": {
"test": "mocha --require babel-register"
}
}
Some features will require a polyfill:
npm install --save-dev babel-polyfill
{
"scripts": {
"test": "mocha --require babel-polyfill --require babel-register"
}
}
Below steps are for applying Babel transformations & core-js polyfills for your tests file:
💡 All transformations are only done per current environment, so only what is needed to be transpiled/polyfilled, will be. Target environments may be defined from a .browserslist file or as a property in package.json file. (read more here)
Step 1: Install packages:
#babel/core (read why)
#babel/preset-env (read why)
#babel/register (read why)
core-js (read why)
Note that #babel/polyfill exists and uses core-js under the hood. However, it was deprecated in favor of using core-js directly.
Step 2: Create a Babel configuration file babel.config.js
(used to be .babelrc.js or a .json file).
Create this file at the root-level of your code.
The most basic configuration (for just testing and not bundling) would look like this:
module.exports = {
presets: [
['#babel/preset-env', {
"corejs": "3.26",
"useBuiltIns": "usage"
}],
};
corejs - This is the polyfills library and should be specified with the minor version, otherwise x.0 will be used.
It is needed when testing code on rather "old" Node versions, which do not support all of the language methods. This ofc depends on your own usage of such javascript methods. (for example String.prototype.replaceAll).
useBuiltIns - must be set in order for the corejs polyfills to be applied. Read about it in the official docs.
By default, #babel/preset-env will compile your code for the current environment, but you can specify a different environment by setting the "targets" option in the configuration.
Ofc, you can add more presets like #babel/preset-react for example, if your code it written in React, or any other plugins which are specifically needed for your code.
Step 3: Connect mocha to the babel configuration:
In your package.json file
Under the scripts section, simply write something like this:
"test": "mocha \"src/**/*.test.js\""
Create a .mocharc.json file with this content:
{
"exit": true,
"color": true,
"require": ["#babel/register"],
"ignore": "node_modules"
}
This will apply Babel transformations to all of your test files.
If you need need to apply some special global javascript before/to all of your tests, you can add another file to the require setting, for example, fixtures.cjs:
"require": ["#babel/register", "fixtures.cjs"],
fixtures.cjs:
Below example applies a chai (popular alongside Mocha) plugin for testing DOM-related code:
var chai = require('chai'),
chaiDOM = require('chai-dom');
// https://stackoverflow.com/questions/62255953/chai-usechaihttp-once-or-in-every-test-file
// https://mochajs.org/#global-teardown-fixtures
exports.mochaGlobalSetup = function () {
chai.use(chaiDOM);
}
Interesting reads:
Babel vs babel-core vs babel-runtime
How does mocha / babel transpile my test code on the fly?
I am trying to add an npm script in package.json that sets NODE_ENV before doing something else (like running webpack). But although the syntax seems to be correct, NODE_ENV is not set when running under Windows 10.
Test script
"scripts": {
"test": "SET NODE_ENV=debug && echo %NODE_ENV%" }
The result from npm run test is "production" (provided NODE_ENV was set to "production" before running the script). Should be "debug".
What could be wrong? I even tried cross-env with no success.
Edit
To clarify my question: I cannot set any environment variable under Windows 10. And I need to call SET because I am running the script under Windows (10). Seems to be some rights problem (scripts not allowed to set environment variables?).
Another (or the actual) question would be: How can I create one script to build (using webpack) with creating minified versions of JavaScript files (for production), and one script to create non-minified versions (for development). So far I use following approach (see comments for the important parts):
Edit 2
I did not now that this probably made a difference, but in case it does: I worked with an React app created with create-react-app. I found the answer to my question, see below.
package.json:
{
"name": "test",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
// Scipts for build for development and for production
"build-dev": "SET NODE_ENV=debug webpack",
"build-release": "SET NODE_ENV=production webpack"
},
"author": "",
"license": "ISC",
"dependencies": {
"babel-core": "^6.24.1",
"babel-loader": "^7.0.0",
"babel-preset-env": "^1.4.0",
"babel-preset-react": "^6.24.1",
"debug": "^2.6.4",
"webpack": "^2.4.1"
}
}
webpack.config.js:
const path = require('path');
var webpack = require('webpack');
// Check if in debug environment
var debug = process.env.NODE_ENV !== "production";
module.exports = {
context: path.join(__dirname, 'src'),
entry: ['./index.js'],
output: {
path: path.join(__dirname, 'www/js'),
filename: 'index.js',
},
devtool: 'source-map',
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
use: ['babel-loader'],
}],
},
// Add the UglifyJs plugin only in debug mode
plugins: debug ? [] : [new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false })],
resolve: {
modules: [
path.join(__dirname, 'node_modules')
]
}
};
This fails because setting NODE_ENV does not work for some reason. Using the command prompt directly like in the scripts:
SET NODE_ENV = debug
webpack
works by the way. That's proof that the configuration is okay, but just the npm script cannot set NODE_ENV.
Just in case you are STILL having issues setting the NODE_ENV in Windows 10 - this will help you. In your package.json file add the following:
"test": "SET \"NODE_ENV=test\""
If you plan on pushing this to Heroku - you will have to "export" the variable and your string would look like this (you are escaping the Windows-NEEDED quotes with a slash):
"test": "export NODE_ENV=test || SET \"NODE_ENV=test\""
Lastly, if you need a following command like mocha then the line would look like this:
"test": "export NODE_ENV=test || SET \"NODE_ENV=test\" && mocha server/**/*.name_of_files_plus_test.js"
Hope this helps someone :) - Mike
I found the answer to my question in the meantime, basically in the create-react-app readme: Firstly in an app created with create-react-app NODE_ENV cannot be manually overridden. Secondly, when setting environment variables, their name must start with "REACT_APP_". This was the solution for me.
In package.json:
"scripts": {
...
"build:staging": "SET REACT_APP_ENVIRONMENT=Staging && npm run build"
}
In the code:
if (process.env.REACT_APP_ENVIRONMENT === "Staging") ...
Did you try?
set DEBUG=* & npm run test
Make sure debug already installed
npm install debug --save
UPDATE:
To set environment variable in windows use
set NODE_ENV=dev //for development environment
In your case
"scripts": {
"test": "NODE_ENV=dev && echo %NODE_ENV%" }
Basically, the component isn't getting compiled, so I get an Unexpected token < error when it runs into <template>
I've run the following commands:
$ npm install --save-dev jest
$ npm install --save-dev vue-jest
$ npm install --save-dev vue-test-utils
and I've out the following in package.json:
"scripts": {
"dev": "node build/dev-server.js",
"build": "node build/build.js",
"test": "jest"
},
...
"jest": {
"unmockedModulePathPatterns": [
"<rootDir>/node_modules/vue"
],
"moduleFileExtensions": [
"js",
"vue"
],
"scriptPreprocessor": "index.js"
}
I created a __test__ folder in the root directory with a simple test:
const Vue = require("vue");
const VueTestUtils = require("vue-test-utils");
Vue.config.debug = true;
Vue.config.async = false;
Vue.use(VueTestUtils.install);
import Hello from '../src/components/Hello.vue'
const Constructor = Vue.extend(Hello)
const vm = new Constructor().$mount()
describe('initial test', () => {
it('should be 1', () => {
expect(1).toBe(1)
})
})
I recently got this error as well, and not quite sure how to configure Vue.js so it will run using the compiler-included build:
[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.
Been looking around for a while, so any help would be appreciated
You need to use a Jest transform to transform Jest Vue files. A Jest transformer is a synchronous function, that takes the file and path as input and outputs transpiled code.
I maintain a npm package that does it for you - vue-jest.
npm install --save-dev vue-jest
You need to add a jest section to your package.json (or in a seperate file with --config). Your config should look something like this:
"jest": {
"moduleFileExtensions": [
"js",
"json",
"vue"
],
"transform": {
"^.+\\.js$": "babel-jest",
".*\\.(vue)$": "vue-jest"
}
}
This tells jest to use jest-vue as a transform for files with a .vue extension.
You can see a working repo using Vue Test Utils here - https://github.com/eddyerburgh/vue-test-utils-jest-example