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:
- 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"]
};
- 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.
Source: stackoverflow.com
Related Query
- React testing with Jest and Enzyme (in Symfony) got "Syntax Error: Unexpected token import"
- Faced error during testing with Jest and Enzyme in React
- Testing debounced function in React component with Jest and Enzyme
- Testing React Router with Jest and Enzyme
- React testing state of component with Jest and Enzyme
- Getting started testing React components with Enzyme and Jest
- testing custom react methods with jest and enzyme
- Error when testing react components with jest and css-modules
- SyntaxError: Invalid or unexpected token when testing react application with babel and jest
- Testing react app with jest and enzyme token problem
- React testing with Jest and Enzyme @react-google-maps/api returns TypeError: Cannot read property 'maps' of undefined
- SyntaxError: Unexpected token '<' on shallow render with Enzyme and Jest in React
- Jest encountered an unexpected token - React with jest and enzyme
- Testing component function in React with Enzyme and Jest
- React with TypeScript + Jest + Enzyme -- Error Test Expected 1 arguments, but got 2
- How to test a className with the Jest and React testing library
- How to mock React component methods with jest and enzyme
- Syntax error in IE11 with Webpack, Babel and React
- Testing with React's Jest and Enzyme when simulated clicks call a function that calls a promise
- Testing with React's Jest and Enzyme when async componentDidMount
- Testing an error thrown by a React component using testing-library and jest
- Testing react-router v4 with Jest and Enzyme
- React jest test with enzyme error
- How to read console.log from a mounted component with Enzyme and Jest in Create React App
- _this.store.getState is not a function when testing react component with enzyme and mocha
- Testing component with react-router v4, Jest and Enzyme
- how can I test if useState hook has been called with jest and react testing library?
- Testing react router v4 with jest enzyme
- Testing react context with jest and react-testing-library
- React Jest creating error "new Error('...')" exit and fail testing immediately
More Query from same tag
- Using component key to delete element from array Reactjs
- How to dynamically set the height on just one header row in ag-grid for react
- How to stretch width of a Dialog box of material ui in reactjs?
- TypeError: __WEBPACK_IMPORTED_MODULE_3__ is not a function
- How to add ak set of keys + values in dictionaries inside a list inside a dictionary
- React Hooks Refs
- Uncertainty with the !! operator (double negation)
- Change color of label in material-ui
- crypto.getCurves is undefined
- how to update single list element in react .map
- Function not receiving updated redux state even on re-render
- Child component is not updating when parent state changes
- Break out of ReactRouter when there is no match
- React not rendering updated UI on state change
- Load images based on dynamic path in ReactJs
- Formatting a javascript function to map matches into timegroups
- Object is possibly "null" - error with TypeScript linter
- pagination and react-bootstrap
- Conditional Rendering not working in React mapped loop
- TypeScript CRA with Redux setup
- Cannot find module '@material-ui/lab'
- React: How to detect if route has changed?
- Replace element in array with in one line using spread operator in javascript react
- Fetch data in parallel using Redux Saga
- Is it possible to hide React component source code through Node.js backend?
- React Kendo UI TreeView throws 'kendo is not defined'
- Query state in React, and setState or update if exists
- useNavigate doesn't load page when navigating between siblings component
- React Redux Store values immediatly after dispatch
- How can i use destructuring assignment into map function?