Jest 测试因 @babylon/core es6 语法而崩溃

Question

我正在尝试加载 3d 场景以响应 babylonjs。这在我的 React 应用程序中非常有效，但我从以前通过的测试中得到失败的测试，并出现以下错误。我试过让 babylon 免于转换，但我还是失败了。

 ● 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'

这是我的 webpack 配置文件

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

这是我的 babel 配置。

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

这是我的笑话配置

{
    "setupFilesAfterEnv": ["jest-expect-message"],
    "transformIgnorePatterns": ["/node_modules/(?!@babylonjs)"],
    "transform": {
        "^.+\.js$": "babel-jest",
        "^.+\.ts$": "ts-jest"
    },
    "globals": {
        "NODE_ENV": "test"
    }
}

Answer 1

我发现因为我处于 mono-repo 结构中，所以我必须按照 jest 文档中的建议从 .babelrc 更改为 babel.config.js。这解决了在 @babylonjs 模块

中转换 esNext 语法的问题

Answer 2

对于那些不使用 babel 的人来说，这可以通过 vanilla ts-jest 来实现。请注意，这可能会使您的测试的初始加载时间增加一分钟，因为 jest 必须转换 babylonjs 库。

const config = {
    ...
    //SLOW - transform javascript
    preset: 'ts-jest/presets/js-with-ts-esm',
    //SLOW - transform node modules
    transformIgnorePatterns: []
}
``

Jest 测试因 @babylon/core es6 语法而崩溃

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

babylonjs

jestjs

babel-jest