symfony - 在带有 encore 的 symfony 项目中，如何设置 Jest？

Question

我有一个与 webpack-encore 和 babel 一起使用的 symfony 5 项目

一开始，我在 webpack.config.js 中激活了 babel :

.configureBabelPresetEnv((config) => {
    config.useBuiltIns = 'usage';
    config.corejs = 3;
})

在通过 encore dump 生成的配置后，我似乎来制作这个 babel.config.js 文件:

module.exports = {
  'presets': [
    [
      '@babel/preset-env',
      {
        'modules': 'auto', # this line was set to false, which made the whole thing bug
        'targets': {
          node: 'current',
        },
        'useBuiltIns': 'usage',
        'corejs': 3,
      },
    ],
    '@babel/react',
  ],
  'plugins': [
    '@babel/plugin-syntax-dynamic-import',
  ],
};

在尝试了每个选项后，我尝试在没有 babel 配置文件的情况下启动 Jest，但将

.configureBabelPresetEnv((config) => {
    config.modules = 'auto';
    config.useBuiltIns = 'usage';
    config.corejs = 3;
})

但是这样， jest 无法运行:

 FAIL  assets/jest/Domain/Events/EventScheduler.test.js
  ● Test suite failed to run

    EventScheduler.test.js:1
    import EventScheduler from '../../../js/Domain/Events/EventScheduler';
           ^^^^^^^^^^^^^^

    SyntaxError: Unexpected identifier

      at Runtime._execModule (node_modules/jest-runtime/build/index.js:1166:56)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        0.671 s
Ran all test suites.

建议 Jest 没有在 webpack 的配置中获取它的配置。

尝试将 webpack 链接到 jest 我尝试遵循官方指南:https://jestjs.io/docs/en/webpack但使用建议的配置:

module.exports = {
  module: {
    loaders: [
      {exclude: ['node_modules'], loader: 'babel', test: /\.jsx?$/},
      {loader: 'style-loader!css-loader', test: /\.css$/},
      {loader: 'url-loader', test: /\.gif$/},
      {loader: 'file-loader', test: /\.(ttf|eot|svg)$/},
    ],
  },
  resolve: {
    alias: {
      config$: './configs/app-config.js',
      react: './vendor/react-master',
    },
    extensions: ['', 'js', 'jsx'],
    modules: [
      'node_modules',
      'bower_components',
      'shared',
      '/shared/vendor/modules',
    ],
  },
};

webpack 抛出一个错误:

Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 - configuration.module has an unknown property 'loaders'. These properties are valid:
   object { defaultRules?, exprContextCritical?, exprContextRecursive?, exprContextRegExp?, exprContextRequest?, noParse?, rules?, strictExportPresence?, strictThisContextOnImports?, unknownContextCritical?, unknownContextRecursive?, unknownContextRegExp?, unknownContextRequest?, unsafeCache?, wrappedContextCritical?, wrappedContextRecursive?, wrappedContextRegExp? }
   -> Options affecting the normal modules (`NormalModuleFactory`).
 - configuration.resolve.extensions[0] should be an non-empty string.
   -> A non-empty string
error Command failed with exit code 1.

现在，我有一些东西可以使用单独的 babel.config.js 文件，但是是否有使用 encore 的标准方法？

Answer 1

我最终从 Encore 中获得了 babel conf:

// babel.config.js
module.exports = {
  presets: ['@babel/preset-env', '@babel/preset-react'],
};

// webpack.config.js
const path = require('path');
const Encore = require('@symfony/webpack-encore');

Encore
.setOutputPath(path.resolve('./../public/build'))
.setPublicPath('/build')
.addEntry('app', './assets/js/app.js')
.splitEntryChunks()
.enableSingleRuntimeChunk()
.cleanupOutputBeforeBuild()
.enableBuildNotifications()
.enableSourceMaps(!Encore.isProduction())
.enableVersioning(Encore.isProduction())
.enableSassLoader()
.enableReactPreset()

module.exports = Encore.getWebpackConfig();

$ ./node_modules/.bin/jest
 PASS  assets/js/Modal.test.jsx
  ✓ scenario de test (35 ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        1.56 s, estimated 2 s
Ran all test suites.