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

时间:2020-07-20 10:54:42

标签: jestjs babylonjs babel-jest

我正在尝试加载3d场景以与babylonjs反应。这在我的React应用程序中表现出色,但是我之前的测试失败并通过了以下错误。我曾尝试使巴比伦免于转型,但仍然失败。

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

这是我的通天塔配置。

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

1 个答案:

答案 0 :(得分:0)

我发现,由于我处于mono-repo结构中,因此我不得不按照玩笑文档中的建议将其从.babelrc更改为babel.config.js。这解决了在@babylonjs模块中转换esNext语法的问题