Develop Reference

React Testing Causing Error "Cannot use import statement outside the module"

I was doing react testing for my redux based application where i wanted to test my redux middleware. in the middleware i used
import axios from "axios"
then it shows error that Cannot use import statement ouside a module
`
FAIL src/test/application/student.test.js
● Test suite failed to run
Jest encountered an unexpected token
Jest failed to parse a file. This happens e.g. when your code or its dependencies use non-standard JavaScript syntax, or when Jest is not configured to support such syntax.
Out of the box Jest supports Babel, which will be used to transform your files into valid JS based on your Babel configuration.
By default "node_modules" folder is ignored by transformers.
Here's what you can do:
• If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/ecmascript-modules for how to enable it.
• If you are trying to use TypeScript, see https://jestjs.io/docs/getting-started#using-typescript
• 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/configuration
For information about custom transformations, see:
https://jestjs.io/docs/code-transformation
Details:
/F/workspace/TahsinAyman/full-stack/student/frontend/node_modules/axios/index.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){import axios from './lib/axios.js';
^^^^^^
SyntaxError: Cannot use import statement outside a module
> 1 | import axios from "axios";
| ^
2 | import application from "../../resources/application.json";
3 |
4 | axios.defaults.baseURL = application.backend;
at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1728:14)
at Object.<anonymous> (src/main/service/student.js:1:1)
at Object.<anonymous> (src/main/service/service.js:1:1)
at Object.<anonymous> (src/test/application/student.test.js:3:1)
at TestScheduler.scheduleTests (node_modules/#jest/core/build/TestScheduler.js:333:13)
at runJest (node_modules/#jest/core/build/runJest.js:404:19)
Test Suites: 1 failed, 1 total
Tests: 0 total
Snapshots: 0 total
Time: 3.779 s
Ran all test suites.
`
I was expecting this to not show that error and simply run api request to my api. i tried to fix it but it was not working

Jest and React Testing Library in Next.js app: Cannot use import statement outside a module

I'm using Jest and RTL in my next.js app.
Installed and set-up as described in documentation but my tests are failing.
Note: I'm importing 3rd party lib, when I comment it out the tests are passing
Error log:
● Test suite failed to run
Jest encountered an unexpected token
Jest failed to parse a file. This happens e.g. when your code or its dependencies use non-standard JavaScript syntax, or when Jest is not configured to support such syntax.
Out of the box Jest supports Babel, which will be used to transform your files into valid JS based on your Babel configuration.
By default "node_modules" folder is ignored by transformers.
Here's what you can do:
• If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/ecmascript-modules for how to enable it.
• If you are trying to use TypeScript, see https://jestjs.io/docs/getting-started#using-typescript
• 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/configuration
For information about custom transformations, see:
https://jestjs.io/docs/code-transformation
Details:
/Users/tair.bitan/git/taboola/products/nova/src/main/webapp/node_modules/swiper/react/swiper-react.js:13
import { Swiper } from './swiper.js';
^^^^^^
SyntaxError: Cannot use import statement outside a module
As it says in the documentation, Next should set up and configure Jest under the hood so it's weird for me that I need to handle it myself (also tried to uninstall and reinstall the libs).
According to suggested solutions I have added two additional keys to the jest.config.js template provided by Next documentation :
testEnvironment: 'jest-environment-jsdom',
transform: {
'^.+\\.ts?$': 'ts-jest',
},
so the file looks like that:
// jest.config.js
const nextJest = require('next/jest')
const createJestConfig = nextJest({
// Provide the path to your Next.js app to load next.config.js and .env files in your test environment
dir: './',
})
// Add any custom config to be passed to Jest
/** #type {import('jest').Config} */
const customJestConfig = {
// Add more setup options before each test is run
// setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
// if using TypeScript with a baseUrl set to the root directory then you need the below for alias' to work
moduleDirectories: ['node_modules', '<rootDir>/'],
testEnvironment: 'jest-environment-jsdom',
transform: {
'^.+\\.ts?$': 'ts-jest',
},
transformIgnorePatterns: ['<rootDir>/node_modules/'],
}
// createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async
module.exports = createJestConfig(customJestConfig)
Unfortunately the problem is not solved by that

Jest Import issue

I am importing some functions from the library which i have added as dependency but when I run test then jest is throwing error saying "jest encountered an unexpected token"
Below is the error details
Details:
C:\Users\sbhuyar\ami-ui-booking-analysis_angular\node_modules\#vana\ami-ui-authentication\src\index.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){export { USER_LOGGED_OUT_ERROR, DEV_ENV } from './constants';
^^^^^^
SyntaxError: Unexpected token 'export'
> 1 | import { initialize, login } from '#vana/ami-ui-authentication';
| ^
2 | const domainSuffix = '.travel-intelligence.com';
3 | export const DEV_ENV = '__dev__';
4 |
at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1728:14)
at Object.<anonymous> (src/api/env.js:1:1)
FAIL src/app/login/loginController.test.js
● Test suite failed to run
Jest encountered an unexpected token
Jest failed to parse a file. This happens e.g. when your code or its dependencies use non-standard JavaScript syntax, or when Jest is not configured to support such syntax.
Out of the box Jest supports Babel, which will be used to transform your files into valid JS based on your Babel configuration.
By default "node_modules" folder is ignored by transformers.
Here's what you can do:
• If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/ecmascript-modules for how to enable it.
• If you are trying to use TypeScript, see https://jestjs.io/docs/getting-started#using-typescript
• 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.

Why JEST does not work with import statement / NEXTJS?

I'm new to unit test in JavaScript, and I'm trying to write a unit test to a Next JS project, but I got this error in response:
Code:
import {isBase64} from '../../service/base64-service'
test('should return false for a invalid base64 string', () => {
expect(
isBase64('YWJj')
)
.toBe(false);
}
)
Error:
● Test suite failed to run
Jest encountered an unexpected token
Jest failed to parse a file. This happens e.g. when your code or its dependencies use non-standard JavaScript syntax, or when Jest is not configured to support such syntax.
Out of the box Jest supports Babel, which will be used to transform your files into valid JS based on your Babel configuration.
By default "node_modules" folder is ignored by transformers.
Here's what you can do:
• If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/ecmascript-modules for how to enable it.
• If you are trying to use TypeScript, see https://jestjs.io/docs/getting-started#using-typescript
• 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/configuration
For information about custom transformations, see:
https://jestjs.io/docs/code-transformation

I found out what I needed to do, the answer was on the documentation 😅:
#1: add this dependence:
yarn add --dev #babel/plugin-transform-modules-commonjs
#2: Edit the .babelrc file:
if you don't have it, create it at the root folder
{
"presets": ["next/babel"],
"env": {
"test": {
"plugins": ["#babel/plugin-transform-modules-commonjs"]
}
},
"plugins": []
}
And now your unit test is going to work with import statements as well 🥰

Jest Vue failing: SyntaxError: Unexpected token 'export'

I have sucessfully setup Jest with Quasar and Vue and most of my tests work. The only test that is failing is this one because of the following error message
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:
• 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:
/Users/kristijanstefanoski/Desktop/Projektt/Quasar/projektt/node_modules/capacitor-firebase-auth/dist/esm/index.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){export * from './definitions';
^^^^^^
SyntaxError: Unexpected token 'export'
> 1 | import * as auth from 'capacitor-firebase-auth';
| ^
2 | import * as firebase from "firebase";
3 | import store from '../store';
4 | import {set} from "src/mixins/storage";
at ScriptTransformer._transformAndBuildScript (node_modules/#jest/transform/build/ScriptTransformer.js:537:17)
at ScriptTransformer.transform (node_modules/#jest/transform/build/ScriptTransformer.js:579:25)
at Object.<anonymous> (src/mixins/auth.js:1:1)
I have already added the following in my jest config:
transformIgnorePatterns: [
'<rootDir>/node_modules/(?!quasar/lang)',
'<rootDir>/node_modules/(?!capacitor-firebase-auth/)',
],
I also tried the following
transformIgnorePatterns: [
'<rootDir>/node_modules/(?!quasar/lang)',
'<rootDir>/node_modules/(?!capacitor-firebase-auth/dist/esm/)',
],
But again without luck. Anything I might be missing?