In a symfony project with encore, how to set-up Jest?

Question

I have a symfony 5 project that I use with webpack-encore and babel

At first, I activated babel in webpack.config.js :

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

After dumping generated config through encore, I seem to have come to make this babel.config.js file :

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',
  ],
};

After trying out each option, I tried launching Jest without the babel config file but putting

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

But with that, jest fails to run :

 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.

Suggesting Jest didn't fetch its config in webpack's config.

Trying to link webpack to jest I tried to follow the official guide : https://jestjs.io/docs/en/webpack but with the suggested configuration :

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 throws an error :

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.

Right now, I have something working with a separate babel.config.js file, but is there a standard way of doing it with encore ?

Answer 1

I ended up getting the babel conf out of Encore :

// 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.