jestjsbabylonjsbabel-jest

Jest tests crash when due to @babylon/core es6 syntax


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"
    }
}

Solution

  • 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