Why does Jest needs Babel to test async code? - jestjs

The Jest "An Async Example" guide starts with:
First, enable Babel support in Jest...
But I miss to see why and where does Jest needs Babel for.

Node.js has supported async functions by default since version 7.6.0, so (as you suspected) Babel is not needed for Jest to run tests using async functions.
I just confirmed this by installing only Jest v24.6.0 and ran this test with Node.js v10.15.1:
test('hi', async () => {
const val = await Promise.resolve('hello');
expect(val).toBe('hello');
});
...and it passed just fine.
On the other hand, Babel is required to use ES6 module syntax.
Many of the examples in the "An Async Example" doc use ES6 module syntax (export default ..., import * as ..., etc.) so Babel is required for any of those examples to work.

Related

nestjs testing - how to start a server with jest mocked modules

I already have e2e backend tests running using jest and some mocked modules using fastify and now that when I use app.listen it will be able to receive calls.
My problem:
I would like to start the nestjs server with the mocked jest modules to be able to call it from outside without the jest scope e.g. for vulnerability scanning of the api endpoints. I have some external dependencies that I want to exclude - this is why I would like to use my jest mocked nestjs modules.
if I try to used ts-node an error will be thrown in those mocked modules
command:
npx ts-node run.ts
file: run.ts
import { initializeApplication } from './app';
(async () => {
const app = await initializeApplication();
app.listen(3005, '0.0.0.0');
})();
error:
jest.fn(
^
ReferenceError: jest is not defined
I would like to be able to start the nestjs backend with jest mocked nestjs modules to make external api calls against the backend using fake dependencies.

"Cannot use import statement outside a module" with Axios

I have a Vue.js application where two files contain:
import axios from "axios"
These files are located in src/lib within the application and include the import statement on their first line.
Running tests on Github causes Axios 1.0.0 to be installed, no matter what the package.json says, and now any test involving these files fails with the above error.
Changing the statement to const axios = require("axios") fails also; node_modules/axios/index.js contains an import statement on line 1 and the exception is thrown there.
A suggestion I've seen quite often for such issues is to add "type": "module" to package.json (which is at the same level as src/). This causes all tests to fail with a demand to rename vue.config.js as vue.config.cjs. Doing that gets me: Error: You appear to be using a native ECMAScript module configuration file, which is only supported when running Babel asynchronously, which I do not understand.
Can anyone suggest what to do here?
I was able to fix this error by forcing jest to import the commonjs axios build by adding
"jest": {
"moduleNameMapper": {
"axios": "axios/dist/node/axios.cjs"
}
},
to my package.json. Other solutions using transformIgnorePatterns didn't work for me.
The 1.x.x version of axios changed the module type from CommonJS to ECMAScript.
The 0.x.x version of axios index.js file
module.exports = require('./lib/axios');
The 1.x.x version of axiox index.js file
import axios from './lib/axios.js';
export default axios;
Basically, jest runs on Node.js environment, so it uses modules following the CommonJS.
If you want to use axios up to 1.x.x, you have to transpile the JavaScript module from ECMAScript type to CommonJS type.
Jest ignores /node_modules/ directory to transform basically.
https://jestjs.io/docs/27.x/configuration#transformignorepatterns-arraystring
So you have to override transformIgnorePatterns option.
There are two ways to override transformIgnorePatterns option.
jest.config.js
If your vue project uses jest.config.js file, you add this option.
module.exports = {
preset: "#vue/cli-plugin-unit-jest",
transformIgnorePatterns: ["node_modules/(?!axios)"],
...other options
};
package.json
If your vue project uses package.json file for jest, you add this option.
{
...other options
"jest": {
"preset": "#vue/cli-plugin-unit-jest",
"transformIgnorePatterns": ["node_modules\/(?!axios)"]
}
}
This regex can help you to transform axios module and ignore others under node_modules directory.
https://regexper.com/#node_modules%5C%2F%28%3F!axios%29
Updating the version of jest to v29 fixed this in my project. It could be the case that you have an incompatible jest version.
I had the same issues and was able to solve this by using jest-mock-axios library
I experience similar problem but the error is caused by jest.
All the tests trying to import axios fail and throw the same exception:
Test suite failed to run
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.
By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".
Here's what you can do:
• If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/en/ecmascript-modules for how to enable it.
• To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
• If you need a custom transformation specify a "transform" option in your config.
• If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.
You'll find more details and examples of these config options in the docs:
https://jestjs.io/docs/en/configuration.html
Details:
/monorepo/node_modules/axios/index.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import axios from './lib/axios.js';
^^^^^^
SyntaxError: Cannot use import statement outside a module
1 | import { describe, expect, it } from '#jest/globals'
> 2 | import axios from 'axios'
The solution is simply tell jest that axios should be transformed with babel:
const esModules = ['lodash-es', 'axios'].join('|')
# add these entries in module.exports
transform: {
[`^(${esModules}).+\\.js$`]: 'babel-jest',
},
transformIgnorePatterns: [`node_modules/(?!(${esModules}))`],
Note: I'm using Quasar Vue and this is their implementation.
Quick fix
Update the npm run test script from
"test": "react-scripts test",
to
"test": "react-scripts test --transformIgnorePatterns \"node_modules/(?!axios)/\"",
In my case I had to add the following line to the moduleNameMapper object in the jest config:
axios: '<rootDir>/node_modules/axios/dist/node/axios.cjs',
I had the same issue, it works fine when changing axios to fetch.
axios (Fail)
try {
const response = await axios("api/fruit/all");
return response.data;
} catch (error) {
return error;
}
Fetch (Works fine)
try {
const response = await fetch("api/fruit/all",{method:"GET"});
const data = await response.json();
return data;
} catch (error) {
return error;
}

Jest, ES6 modules "does not provide export named"

I have an express app with a CRUD API (with sequelize) and I want to test it with Jest. I'm pretty new in unit-testing so I follow this guide, recommended by Jest's website.
The problem I have is that my app is built with ES6 modules and Jest ES6 modules is experimental and it seems that it doesn't "import" packages.
I have this test (took from the guide)
import request from 'supertest';
import app from '../app';
describe('Test the root path', () => {
test('It should response the GET method', done => {
request(app)
.get('/')
.then(response => {
expect(response.statusCode).toBe(404);
done();
});
});
});
And when I launched it (with NODE_OPTIONS=--experimental-vm-modules npx jest I had to follow this jest wiki page), It says that
'sequelize' does not provide an export named 'DataTypes' and when I launch my app normally (like with npm start) it works fine, without any problems.
(the complete error log):
(node:49576) ExperimentalWarning: VM Modules is an experimental feature. This feature could change at any time
(Use `node --trace-warnings ...` to show where the warning was created)
FAIL __tests__/app_test.js
● Test suite failed to run
SyntaxError: The requested module 'sequelize' does not provide an export named 'DataTypes'
at Runtime.linkAndEvaluateModule (node_modules/jest-runtime/build/index.js:779:5)
at TestScheduler.scheduleTests (node_modules/#jest/core/build/TestScheduler.js:333:13)
at runJest (node_modules/#jest/core/build/runJest.js:404:19)
at _run10000 (node_modules/#jest/core/build/cli/index.js:320:7)
at runCLI (node_modules/#jest/core/build/cli/index.js:173:3)
(and my Jest config)
// Sync object
/** #type {import('#jest/types').Config.InitialOptions} */
export default async () => {
return {
verbose: true,
transform: {},
};
};
Am I doing something wrong ? Should I change to commonJS instead of ES6
Thank you.
This is a known problem in Jest: #9771. It is said to be fixed in jest#28.0.0-alpha.0.
An interesting hack to work around this problem is to remove the main field from the package.json of the imported project.

Top-level await doesn't work in the latest Node.js

Is top-level await still not supported in Node.js (Jan 2020, Node.js 13.5.0)?
I've tried some tutorials, like this one, but still no luck, always getting the same error:
D:\NodeJS>node --experimental-modules test.js
(node:17724) ExperimentalWarning: The ESM module loader is experimental.
file:///D:/NodeJS/test.js:9
await test();
^^^^^
SyntaxError: Unexpected reserved word
The entire file content:
function test() {
}
await test();
I have tried using "type": "module" in package.json, and renaming file into test.mjs, but still the same error, even with the latest Node.js 13.5.0
What am I doing wrong?
Per this issue tracker and this blog post, top-level await is available in Node v13.3+ behind the flag --harmony-top-level-await. The module flag you're enabling is only for ESM modules and not for top level await.
node --experimental-repl-await
works for the Node REPL
edit: the Node 16 REPL accepts top level await by default, you don't need the experimental flag anymore
I dont know why, but to get the --harmony features like you need to use --eval (-e) or --print (-p) instead of just launching node like
node -e "import('./test.mjs')" --experimental-modules --input-type=module --harmony-top-level-await
file-content:
console.log(await Promise.resolve("test"));
console:
node -e "import('./test.mjs')" --experimental-modules --input-type=module --harmony-top-level-await
(node:9096) ExperimentalWarning: The ESM module loader is experimental.
test
When using node -e:
Note that while top-level await is unflagged in node 14.8.0, when doing node -e (node --eval), the input type defaults to CJS, and top-level await is allowed only in ESM mode.
To tell that the input is ESM, you need a flag:
node --input-type=module -e 'console.log(await Promise.resolve(42))'
> 42
As an alternative, you could wrap your top level code into function mark it as async but don't wait for it's result. And only wait for the result of async action you need to wait.
That way you will have no warning, not work in 100% of situations, because top level code can be in multiple files etc. But for the majority hope could help, w/o need to change node flags, as it's not always easy (for example when you don't run any node commands yourself and need to extract some node/webpack configs)
setupApp()
async function setupApp () {
await action1()
action2()
}

Mocha - Running test ReferenceError: regeneratorRuntime is not defined

I am trying to run tests with async/await using mocha. The project architecture was setup before I started working on it and I have been trying to update it's node version to 8.9.4. The project is an isomorphic application and uses babel, gulp and webpack to run.
To run the tests we run a gulp task. There are two .bablerc files in the project. One in the root folder of the project and another in the test fodler.
Both have the same configuration:
{
"presets": [
["env", {"exclude": ["transform-regenerator"]}],
"react",
"stage-1"
],
"plugins": [
"babel-plugin-root-import"
]
}
When I run the app locally there is no error returned anymore. However when I run the tests with gulp test:api I constantly get the error: ReferenceError: regeneratorRuntime is not defined
This is my gulp file in the test folder:
var gulp = require('gulp')
var gutil = require('gulp-util')
var gulpLoadPlugins = require('gulp-load-plugins')
var plugins = gulpLoadPlugins()
var babel = require('gulp-babel')
require('babel-register')({
presets:["es2015", "react", "stage-1"]
});
// This is a cheap way of getting 'test:browser' to run fully before 'test:api' kicks in.
gulp.task('test', ['test:browser'], function(){
return gulp.start('test:api')
});
gulp.task('test:api', function () {
global.env = 'test'
gulp.src(['test/unit-tests/server/**/*.spec.js'], {read: false})
.pipe(plugins.mocha({reporter: 'spec'}))
.once('error', function (error) {
console.log(error)
process.exit(1);
})
.once('end', function () {
process.exit(0);
})
});
gulp.task('default', ['test']);
Any help on why this is happening wouldd be much appreciated.
Node version 8 already has support for async/await so you do not need Babel to transform it; indeed, your root .babelrc includes this preset to exclude the regenerator that would transform async/await (and introduce a dependency on regeneratorRuntime):
["env", {"exclude": ["transform-regenerator"]}]
However, in your test file, the configuration does not specify this preset. Instead, it specifies the preset "es2015", which does include the unwanted transform-regenerator (as you can see at https://babeljs.io/docs/plugins/preset-es2015/). If you change this to match the presets in the root .babelrc, you'll get more consistent results.
Strangely i ran into this issue after i upgraded to Node v8.10.0 from v8.6.x . I had used babel-require like so in my test-setup.js
require('babel-register')();
and the testing tools are Mocha,chai,enzyme + JSDOM . I was getting the same issue when i was making a async call to a API, also while using generator functions via sagas. Adding babel-polyfill seemed to have solved the issue.
require('babel-register')();
require('babel-polyfill');
i guess even babel docs themselves advocate using polyfill for generators and such
Polyfill not included
You must include a polyfill separately when using features that require it, like generators.
Ran into the same issue when running mocha tests from within Visual Studio Code.
The solution was to add the necessary babel plugins in the Visual Studio Code settings.json :
"mocha.requires": [
"babel-register",
"babel-polyfill"
],
I've run into this error before myself when using async/await, mocha, nyc, and when attempting to run coverage. There's never an issue when leveraging mocha for running tests, just with mocha tests while leveraging nyc for running coverage.
11) Filesystem:removeDirectory
Filesystem.removeDirectory()
Should delete the directory "./tmp".:
ReferenceError: regeneratorRuntime is not defined
at Context.<anonymous> (build/tests/filesystem.js:153:67)
at processImmediate (internal/timers.js:461:21)
You can fix the issue a couple of different ways.
Method 1 - NPM's package.json:
...
"nyc": {
"require": [
"#babel/register",
"#babel/polyfill"
],
...
},
...
It really depends which polyfill package you're using. It's recommended to use the scoped (#babel) variant: #babel/pollyfill. However, if you're using babel-polyfill then ensure that's what you reference.
Method 2 - Direct Import
your-test-file.js (es6/7):
...
import '#babel/polyfill';
...
OR
your-test-file.js (CommonJS):
...
require("#babel/polyfill");
...
Don't assign it to a variable, just import or require the package. Again, using the package name for the variant you've sourced. It includes the polyfill and resolves the error.
HTH

Resources