I get this error:
C:\Users\myname\Projects\ConfigEditor\MesConfiguration.WebClient\node_modules\tslib\tslib.es6.js:24
export function __extends(d, b) {
^^^^^^
SyntaxError: Unexpected token 'export'
My jest-esm.config.mjs looks like this
const jestConfig = {
preset: 'jest-preset-angular/presets/defaults-esm',
extensionsToTreatAsEsm: ['.ts'],
globals: {
'ts-jest': {
useESM: true,
stringifyContentPathRegex: '\\.(html|svg)$',
tsconfig: '<rootDir>/tsconfig-esm.spec.json',
},
},
testEnvironment: 'jsdom',
moduleFileExtensions: ['ts', 'html', 'js', 'json', 'mjs'],
resolver: 'jest-preset-angular/build/resolvers/ng-jest-resolver.js',
transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'],
transform: {
'^.+\\.(ts|js|mjs|html|svg)$': 'jest-preset-angular',
},
globalSetup: 'jest-preset-angular/global-setup',
moduleNameMapper: {
//tslib: 'tslib/tslib.mjs',
tslib: 'tslib/tslib.es6.js',
"#shared/(.*)": "<rootDir>/src/app/shared/$1",
"#editors/(.*)": "<rootDir>/src/app/editors/$1",
"#dashboard/(.*)": "<rootDir>/src/app/dashboard/$1",
"#env": "<rootDir>/src/environments/environment",
},
setupFilesAfterEnv: ['<rootDir>/src/setup-jest.ts'],
}
export default jestConfig;
package.json has
"type": "module",
I start the test with
"test-esm": "node --experimental-vm-modules --no-warnings node_modules/jest/bin/jest.js -c=jest-esm.config.mjs --no-cache",
What ist wrong?
After renaming the tslib.es6.js to tslib.mjs the error is gone, but this is no solution. It should work after any yarn install
The error is gone because you have set
transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)']
you are basically using the preset jest-preset-angular/presets/defaults-esm So most of the properties you are typing in the config are redundant
One thing is that the transformIgnorePatterns somehow does not work with multiple items in that array (in some cases) so it is better to put everything at once like in my case
transformIgnorePatterns: ['node_modules/(?!rxjs|tslib)']
here is my full jest.config.js and setup-jest.ts file I am using with Angular14 with the ESM execution node --experimental-vm-modules node_modules/jest/bin/jest.js
// jest-config.ts
module.exports = {
preset: 'jest-preset-angular/presets/defaults-esm',
testRegex: '.*spec.ts$',
transformIgnorePatterns: [
'node_modules/(?!rxjs|tslib)'
],
moduleNameMapper: {
"^dnd-core$": "dnd-core/dist",
"^react-dnd$": "react-dnd/dist",
"^react-dnd-html5-backend$": "react-dnd-html5-backend/dist",
"^react-dnd-touch-backend$": "react-dnd-touch-backend/dist",
"^react-dnd-test-backend$": "react-dnd-test-backend/dist",
"^react-dnd-test-utils$": "react-dnd-test-utils/dist"
},
setupFilesAfterEnv: ['<rootDir>/setup-jest.ts'],
};
// setup-jest.ts
import 'jest-preset-angular/setup-jest.mjs';
Object.defineProperty(window, "getComputedStyle", {
value: () => ["-webkit-appearance"]
});
Related
I want to use expo-updates package with detox and jest, however I keep getting the following error:
FAIL test/e2e/starter.test.ts..
● Test suite failed to run
Jest encountered an unexpected token
...
Details:
<Redacted>/node_modules/expo-updates/build/index.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){export * from './Updates';
^^^^^^
SyntaxError: Unexpected token 'export'
1 | import { expect, device, by } from 'detox'
> 2 | import * as Updates from 'expo-updates'
| ^
3 |
4 | describe('Example', () => {
5 | beforeAll(async () => {
I have this jest.config.js
module.exports = {
preset: 'ts-jest',
rootDir: '..',
testMatch: ['<rootDir>/**/*.test.ts'],
testTimeout: 120000,
maxWorkers: 1,
reporters: ['detox/runners/jest/reporter'],
globalSetup: 'detox/runners/jest/globalSetup',
globalTeardown: 'detox/runners/jest/globalTeardown',
testEnvironment: 'detox/runners/jest/testEnvironment',
transformIgnorePatterns: ['node_modules/(?!expo-updates)'],
transform: {
'^.+\\.ts?$': 'ts-jest',
'^.+\\.(js|jsx)$': 'babel-jest',
},
verbose: true,
}
and I added to babel.config.js
presets: [
['#babel/preset-env', { targets: { node: 'current' } }],
'#babel/preset-typescript',
]
So what else can I do?
Using these versions:
ts-jest: 29.0.3
babel: 29.3.1
expo-updates: 0.14.7
Here is my eslintrc.json
{
"env": {
"browser": true,
"es2021": true
},
"extends": [
"eslint:recommended",
"plugin:vue/vue3-essential"
],
"parserOptions": {
"ecmaVersion": "latest"
},
"plugins": [
"vue",
"eslint-plugin-vue"
],
"rules": {
"vue/no-async-in-computed-properties": "error",
"vue/no-unused-vars": "error"
}
}
And This is my vue component(mycomponent.js).
I am using vue CDN to define the vue component.
const myComponent = Vue.defineComponent({
template: '#myTemplate',
components: {
'other-component': otherComponent,
},
props: {...}
watch: {...}
data() {return {...}}
methods: {
fn1() {
let a;
}
}
});
As you can see, The vue component has an unused variable in the fn1 function.
But it doesn't give any error.
Please review if there is any issues in the eslint configuration.
I already installed the eslint-plugin-vue package.
I cannot get my jest tests to run when I have ignored a file with babel:
babel.config.js:
module.exports = {
ignore: ['./app/utils/myfile.js'],
presets: [
[
'#babel/preset-env',
{
targets: {
node: '14',
},
useBuiltIns: 'entry',
corejs: '3.8',
},
],
],
};
jest.config.js:
module.exports = {
coverageDirectory: 'coverage',
setupFiles: ['./jest.init.js'],
testEnvironment: 'node',
testMatch: ['**/?(*.)+(spec|test).js'],
transform: {
'^.+\\.(js|jsx)$': 'babel-jest',
},
transformIgnorePatterns: ['myfile'],
testPathIgnorePatterns: ['/node_modules/'],
};
i have added myfile.js to the babel ignore and to the jest transformIgnorePatterns. what could it be?
Angular13 project
Jest
I get this error endlessly while running a test with Jest:
ReferenceError: You are trying to `import` a file after the Jest environment has been torn down. From src/app/editors/bcc-context/context-val/components/details/variable/variable-details.component.spec.ts.
at runMicrotasks (<anonymous>)
at async Promise.all (index 3)
My jest config looks like this:
const jestConfig = {
preset: 'jest-preset-angular/presets/defaults-esm',
extensionsToTreatAsEsm: ['.ts'],
globals: {
'ts-jest': {
useESM: true,
stringifyContentPathRegex: '\\.(html|svg)$',
tsconfig: '<rootDir>/tsconfig-esm.spec.json',
},
},
testEnvironment: 'jsdom',
moduleFileExtensions: ['ts', 'html', 'js', 'json', 'mjs'],
resolver: 'jest-preset-angular/build/resolvers/ng-jest-resolver.js',
transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'],
transform: {
'^.+\\.(ts|js|mjs|html|svg)$': 'jest-preset-angular',
},
globalSetup: 'jest-preset-angular/global-setup',
moduleNameMapper: {
//tslib: 'tslib/tslib.mjs',
tslib: 'tslib/tslib.es6.js',
"#shared/(.*)": "<rootDir>/src/app/shared/$1",
"#editors/(.*)": "<rootDir>/src/app/editors/$1",
"#dashboard/(.*)": "<rootDir>/src/app/dashboard/$1",
"#env": "<rootDir>/src/environments/environment",
},
setupFilesAfterEnv: ['<rootDir>/src/setup-jest.ts'],
}
export default jestConfig;
jest.useFakeTimers() doesn't change anything
Any other suggestions?
I'm trying to load a 3d scene in react with babylonjs. And this works excellently in my React app but I am getting failed tests from tests that have previously been passing with the following errors. I have tried exempting babylon from transformations but I am still failing.
● Test suite failed to run
Jest encountered an unexpected token
SyntaxError: Unexpected token export
at compileFunction (<anonymous>)
4 | import styled, { withTheme } from 'styled-components'
5 | import { observer, inject } from 'mobx-react'
> 6 | import * as BABYLON from '#babylonjs/core'
| ^
7 | import { GLTFFileLoader } from '#babylonjs/loaders/glTF/glTFFileLoader'
8 | import '#babylonjs/loaders/glTF'
9 | import '#babylonjs/materials/custom'
Here is my webpack configuration file
const path = require('path')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'index_bundle.js',
},
module: {
rules: [
{
test: /\.(js)$/,
exclude: /node_modules/,
use: [
{
loader: 'babel-loader',
options: {
rootMode: 'upward',
presets: [
'#babel/preset-env',
'#babel/react',
{
plugins: [
'#babel/plugin-proposal-class-properties',
],
},
],
},
},
],
},
{
test: /\.css$/,
exclude: /node_modules/,
use: [
{
loader: 'style-loader',
},
{
loader: 'css-loader',
},
],
},
],
},
mode: 'development',
devtool: 'inline-source-map',
plugins: [
new webpack.HotModuleReplacementPlugin(),
new HtmlWebpackPlugin({
template: './src/index.html',
}),
],
devServer: {
contentBase: path.join(__dirname, 'public'),
hot: true,
port: 3000,
open: true,
historyApiFallback: true,
},
}
Here is my babel configuration.
{
"presets": ["#babel/preset-env", "#babel/preset-react"],
"plugins": [
["#babel/plugin-proposal-decorators", { "legacy": true }],
["#babel/plugin-proposal-class-properties", { "loose": true }],
"#babel/plugin-proposal-optional-chaining",
"#babel/plugin-transform-runtime",
[
"styled-components",
{ "ssr": false, "displayName": true, "preprocess": false }
]
],
"env": {
"production": {
"plugins": [
["react-remove-properties", { "properties": ["data-testid"] }]
]
},
"test": {
"presets": ["#babel/preset-env", "#babel/preset-react"],
"plugins": [
"#babel/plugin-proposal-class-properties",
"#babel/plugin-transform-modules-commonjs"
]
}
}
}
Here is my jest configuration
{
"setupFilesAfterEnv": ["jest-expect-message"],
"transformIgnorePatterns": ["/node_modules/(?!#babylonjs)"],
"transform": {
"^.+\\.js$": "babel-jest",
"^.+\\.ts$": "ts-jest"
},
"globals": {
"NODE_ENV": "test"
}
}
I found since I was in a mono-repo structure, I had to change from .babelrc to babel.config.js as recommended in jest docs. This solved the issue of transforming the esNext syntax in the #babylonjs modules
For those who aren't using babel this can be achieved with vanilla ts-jest. Be warned, this can add up to a minute to the initial load time for your tests because jest has to transform the babylonjs library.
const config = {
...
//SLOW - transform javascript
preset: 'ts-jest/presets/js-with-ts-esm',
//SLOW - transform node modules
transformIgnorePatterns: []
}
``