Can’t seem to run my tests without failing. It seems like a typescript module that can’t be transformed by jest. I am not very sure of how to transform @babylonjs in the node_modules. Please someone help.
F:\projects\sip2\sip-frontend\apps\respondent_app\node_modules\@babylonjs\core\index.js:1
export * from "./abstractScene";
^^^^^^
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'
at Runtime._execModule (node_modules/jest-runtime/build/index.js:1179:56)
at Object.<anonymous> (src/components/Tagger3D/Tagger.js:6:1)
at Object.<anonymous> (src/components/index.js:11:1)
at Object.<anonymous> (src/components/InfoScreen/__tests__/InfoScreen.test.js:6:1)
Below is my jest.config.json file
{
"setupFilesAfterEnv": ["jest-expect-message"],
"transformIgnorePatterns": ["<rootDir>/node_modules/(?!@babylonjs)"]
}
I don’t know anyone with jest experience here, but maybe you can provide a bit more detail on how this is set up? It seems like jest supports ES6 modules and it looks like you are using ES6 modules, but it’s hard to know what is wrong without more context.
I am not sure jest support out of the box export import syntax. You would need to at least add babel and the es2015 transform plugin like described here: unit testing - Test ES6 modules with Jest - Stack Overflow
1 Like
I don’t think the problem is with ES6 modules as I was running jest before I added babylon dependency and all tests pass. After adding @babylonjs/core and using it in the codebase to render 3d model in a react component. It then causes tests to fail with this. I suspect it’s because of typescript as I use es6 modules everywhere in my react project and that never stopped babel from transpiling it before.
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.
I am pretty sure it is due to the import export syntax as I had to solve it on some other projects.
The import transform plugin is the way to go and yes it would need to apply to node_modules/@babylonjs which is not the case by default as transform by default do not apply to node_modules files.
Thanks @sebavan, but I have been trying to do just that, I am sure it’s the problem but for some reason. It doesn’t fix the test crash even when I transform the entire node_modules.
// jest.config.json
{
"setupFilesAfterEnv": ["jest-expect-message"],
"transformIgnorePatterns": [],
"transform": {
"^.+\\.js$": "babel-jest",
"^.+\\.ts$": "ts-jest"
},
"globals": {
"NODE_ENV": "test"
}
}
// .babelrc
{
"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",
{
"modules": "auto"
},
"jest"
]
],
"plugins": ["@babel/plugin-transform-modules-commonjs"]
}
}
}
I have seen issues with .babelrc file not working and requiring the use of babel.config.js instead. Would it be possible to be this for you ?
2 Likes
Okay let me try using babel.config.js instead and see how it goes…
@sebavan thanks, it works like a charm… 
1 Like
@sebavan creating a new engine works very well on browser as expected but when I try and run tests with @testing-library/react. The render never seems to complete without skipping the engine creation. The test will keep running forever.
if (this.props.skip_babylon) {
// creating an engine crashes render in rtl with a timeout
// this prop is supplied in the tests to skip engine creation
} else {
this._engine = new BABYLON.Engine(this._canvas, true, {
premultipliedAlpha: false,
preserveDrawingBuffer: true,
})
}
I do not know at all testing-library so we can not do much if they do not support WebGL and you should probably check with them.
Usually for babylon in term of testing ppl are relying on our NullEngine implementation.
Thanks @sebavan am using the NullEngine implementation for tests now…
1 Like
Workaround i found which worked for me is to use rollup and import rollup output file into jest to test the code.
https://gist.github.com/edojacobs/9cfdcb016b77954daa2cbae5eaa34f24
I am using next v13 and “@babylonjs/core”: “^5.54.0”. When I try to write unit test cases for my app. it crashes with the same error
I tried all the solutions provided above but had no luck. Can someone help me out?
you will need to transform babylon in order to be able to consume it, as it seem slike jest doesn’t support es modules
Hello @RaananW. Is there any workaround for this ??
Sadly not, if you only want to use Jest. This is because of the way Jest support es modules. You can try a different test suite or pass babylon as a module so that it will be transformed for the tests.
