I've got babel-plugin-module-resolver set up on my project and it works fine, until I run my tests.
I've set up ~/ to point to ./src.
I've tried adding the following to package.json but it still does not work
"jest": {
"preset": "react-native",
"moduleNameMapper": {
"~": "./src"
}
}
You could use babel-jest plugin to make jest use babel as a preprocessor.
You can also find an example of this here
Related
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 have updated the SDK using this instruction. And I ran the app. The app shows this error in red screen:
babelHelpers.readOnlyError is not a function. (In
âbabelHelpers.readOnlyError(ânewSizeâ)â, âbabelHelpers.readOnlyErrorâ
is undefined )
How can I solve this error?
I tried clearing the yarn cache, installing yarn packages again but do not work.
I found this webpage solving my problem.
Add the following in package.json:
"devDependencies": {
"babel-plugin-transform-remove-console": "6.9.4",
"babel-preset-expo": "^5.0.0"
}
make the .babelrc:
{
"presets": ["babel-preset-expo"],
"env": {
"production": {
"plugins": [
"transform-remove-console"
]
}
}
}
Update .babelrc and package.json
Delete node_modules folder
Install babel-plugin-transform-remove-console, babel-preset-expo. Run yarn or npm.
Run expo clearing cache using expo start -c
I am trying to set up a React-Native project with lerna. When I try to run jest I face the following error.
The name `setupDevtools` was looked up in the Haste module map. It cannot be resolved, because there exists several different files, or packages, that provide a module for that particular name and platform. The platform is generic (no extension). You must delete or blacklist files until there remains only one of these:
* `/Users/kevin.amiranoff/project/node_modules/react-native/Libraries/Core/Devtools/setupDevtools.js` (module)
* `/Users/kevin.amiranoff/project/packages/App/node_modules/react-native/Libraries/Core/Devtools/setupDevtools.js` (module)
* `/Users/kevin.amiranoff/project/packages/App-exceptions/node_modules/react-native/Libraries/Core/Devtools/setupDevtools.js` (module)
* `/Users/kevin.amiranoff/project/packages/App-signin/node_modules/react-native/Libraries/Core/Devtools/setupDevtools.js` (module)
* `/Users/kevin.amiranoff/project/packages/App-ui/node_modules/react-native/Libraries/Core/Devtools/setupDevtools.js` (module)
* `/Users/kevin.amiranoff/project/packages/App-utils/node_modules/react-native/Libraries/Core/Devtools/setupDevtools.js` (module)
Here is my jest config in my root package.json
"jest": {
"preset": "react-native",
"globals": {
"__DEV__": true
},
"testRegex": "packages/(.*)/src/(.*)/__tests__/(.*).js?$",
"transformIgnorePatterns": [
"packages/(.*)/node_modules/?!(react|react-native)"
],
"testEnvironment": "node"
}
Can anyone explain to me what do I have to ignore and how?
You should use the modulePathIgnorePatterns to ignore certain directories.
Make sure that only the one you really want to use is not in this ignore list.
Link to documentation:
https://facebook.github.io/jest/docs/en/configuration.html#modulepathignorepatterns-array-string
Put the following in your package.json file:
"jest": {
"modulePathIgnorePatterns": [
'.*/node-modules/'
]
}
You can find more info about this config option in Configuring Jest here.
The FileAPI library (https://github.com/mailru/FileAPI/issues/202) does not officially support CommonJS modules. I've tried using browserify-shim but I'm not able to make it work. After requireing fileapi I just get an empty object back. I've created a repo for reproduction here https://github.com/Prinzhorn/browserify-fileapi
Relevant package.json part
{
"dependencies": {
"fileapi": "2.0.15"
},
"devDependencies": {
"browserify": "11.1.0",
"browserify-shim": "3.8.10"
},
"browser": {
"fileapi": "./node_modules/fileapi/dist/FileAPI.html5.js"
},
"browserify-shim": {
"fileapi": "FileAPI"
}
}
If you want to try it locally:
git clone git#github.com:Prinzhorn/browserify-fileapi.git
npm install
npm run build
chromium-browser index.html
Check out the console in Chromium, you'll see an empty array from running console.log(Object.keys(require('fileapi'))). Note that there is a global window.FileAPI with the correct API.
Does anyone know if browserify-shim is able to shim FileAPI? Because I believe it does some exotic things to manage it's dependencies (the concatenated files expect certain globals).
You'll need to tell browserify to use browserify-shim as a transform in the package.json as outlined in this example
Mainly you're missing:
"browserify": {
"transform": [ "browserify-shim" ]
}
I am building a project with broweserify, jquery and jquery-ui. All libs were pulled down with npm. Here is how I am using my browserify-shim to pull in jquery' and 'jquery-ui:
"browserify": {
"transform": [ "browserify-shim" ]
},
"browser": {
"jquery": "./node_modules/jquery/dist/jquery.js",
"jquery-ui": "./node_modules/jquery-ui/jquery-ui.js"
},
"browserify-shim": {
"jquery": "$"
}
Everything works like it should, but I look at jquery-ui.js and the first line of code is
var jQuery = require('jquery');
How is this line of code being resolved? When I put a debuggerstatement after this, jquery is always resolved. I even changed the name of jquery in my shim and the it still resolved. How is that happening?
Short answer: your package.json dependencies
Long answer: I'm also using those npm modules. That jquery-ui package seems to have been retooled to require its internal dependencies. As you note, the first line of the jquery-ui core.js is: var jQuery = require('jquery'); which looks for a module called jquery in the project's npm dependencies. That's handled by something like what I have in my package.json:
"dependencies": {
"jquery": "^2.1.1",
"jquery-ui": "^1.10.5",
}
in addition to the browserify parts:
"browserify": {
"transform": [ "browserify-shim" ]
},
"browser": {
"jquery": "./node_modules/jquery/dist/jquery.min.js",
"jq-ui": "./node_modules/jquery-ui/jquery-ui.js"
},
"browserify-shim": {
"jquery": "$",
"jq-ui": {
"exports": "jq-ui",
"depends": [ "jquery:jQuery" ]
},
}
What I haven't figured out is whether we can use the jQuery UI components in our other client-side scripts.
See also:
* Using Browserify with jquery and non-npm plugins
* Using Browserify with jQuery plugins
If you installed jquery and jquery-ui with npm, then I suspect they're somewhere in the rest of your dependencies. In that case, you're actually not using the "browser" "jquery" property, but instead letting browserify use it's non-shimmed "require" process.
Is "jquery" in your "dependencies" list? What happens if you delete that "browser" "jquery" line entirely?