I am testing the react container. This container uses my custom decorator. The decorator file is placed in the common folder outside the project. The ES6 export syntax is used. When I run jest, I get SyntaxError: Unexpected token'export', I try I have tried the following solutions but there is no way to solve it. I have also tried jest v25.4.0 and v27.1.0 and there is no way.
Does Jest support ES6 import/export?
Unexpected reserved word 'import' when using babel
The following is my current configuration
Container
import React from 'react';
import {decorator} from '../../../../common/decorator/decorator';
const TestContainer = (props) => {
return (
<>...</>
);
};
export const Container= decorator.before(TestContainer, xxxx);
decorator:
const decorator = (function () {
const before = function (target, isHandler) {
let self = target;
return function () {
isHandler.apply(this, arguments);
return self.apply(this, arguments);
}
}
return {
before: before,
}
})();
export {
decorator
};
test file:
import React from 'react';
import {render} from '@testing-library/react';
import {Container} from '../container';
describe('container testing', () => {
it('should render container title into dom', () => {
const {getByTestId} = render(Container);
});
});
jest.config.js:
module.exports = {
verbose: true,
testEnvironment: 'jest-environment-node',
collectCoverageFrom: [
'!<rootDir>/src/registerServiceWorker.js',
'!<rootDir>/src/serviceWorker.js',
'!<rootDir>/node_modules/',
],
moduleNameMapper: {
'\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': 'identity-obj-proxy',
'\\.(css|less|scss|sass)$': 'identity-obj-proxy',
},
};
.babelrc
{
"presets": [
"@babel/preset-react",
[
"@babel/preset-env",
{
"targets": {
"node": "current"
}
}
]
],
"plugins": [
"@babel/plugin-transform-runtime"
],
"env": {
"test": {
"plugins": ["@babel/plugin-transform-modules-commonjs"]
}
}
}
script:
"test": "jest --watchAll",