score:0

I know that this reply comes about 2 years after the post was created, however I have faced similar problem with Jest/Enzyme tests under React/Symfony 5/Encore setup. Here is a valid solution for the issue:

  1. Comment Babel configuration from webpack.config.js (used by Encore) and create custom configuration with regular babel.config.js file:
  • webpag.config.js - comment Encore configureBabelPresetEnv babel setup:
/*
 * Commented as babel.config.js is used
 * The "callback" argument of configureBabelPresetEnv()
 * will not be used because your app already provides an
 * external Babel configuration (e.g. a ".babelrc" or "babel.config.js" 
 * file or "babel" key in "package.json").
 */
//enables @babel/preset-env polyfills
//.configureBabelPresetEnv((config) => {
//    config.useBuiltIns = 'usage';
//    config.corejs = 3;
//})

  • babel.config.js - create this configuration file at the root of your project. It will serve Jest to grab babel preset and overload part of Encore configuration (commented previously in webpack.config.js):
module.exports = {
    presets: [
        [
            '@babel/preset-env',
            {
                targets: {
                    node: 'current',
                    browsers: [
                        "> 0.5%",
                        "last 2 versions",
                        "IE 11"
                    ]
                },
                useBuiltIns: 'usage',
                corejs : {
                    version: "3",
                    proposals : true
                }
            },
        ],
        ['@babel/preset-react'],
        ['@babel/preset-typescript']
    ],
    plugins: ["@babel/plugin-syntax-jsx"]
};
  1. Setup Jest using following files:
  • setup.js - create the file in your test directory
import React from 'react';

import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

configure({ adapter: new Adapter() });
  • finally update jest.config.js file with lines below:
module.exports = {
    rootDir: './assets',
    //test files
    testRegex: './assets/js/.*test\\.js$',
    //setup 
    setupFiles: ['<rootDir>/tests/setup.js'],
    //alias list to integrate swiftly nested directories
    //this can be skipped if not needed
    moduleNameMapper: {
        '^@constants(.*)$': '<rootDir>/js/constants',
        '^@containers(.*)$': '<rootDir>/js/containers',
        '^@store(.*)$': '<rootDir>/js/store',
         //identity-obj-proxy to integrate styles/images etc.
         //this can be skipped if not needed
        '\\.(css|less|scss|jpg|jpeg|png)$': 'identity-obj-proxy'
    }
};

List of dependencies I have used to make Jest/Enzyme working with React/Symfony 5:

npm install --save-dev jest
npm install --save-dev enzyme
npm install --save-dev enzyme-adapter-react-16 
npm install --save-dev @babel/plugin-syntax-jsx
npm install --save-dev @babel/preset-typescript
npm install --save-dev identity-obj-proxy

Final implementation can be found here: symfony-react-jest-enzyme

Voila, hope this will help someone.


Related Query

More Query from same tag