React Jest causing "SyntaxError: Unexpected token ." - reactjs

Question

I am now using React Jest to test code. If a component is single, and not importing anything else, "npm test" runs smoothly. Now I want to test multiple components together, and I immediately get this error:
SyntaxError: Unexpected token .
It seemed whenever React is importing something else, such as this one:
require( './style/fixed-data-table.css' );
require( './style/jnpr-datatable.scss' );
and then using Jest, it is throwing the unexpected token "." error.
There must be something wrong in my settings, but where? My package.json file contains:
"jest": {
"unmockedModulePathPatterns": [
"<rootDir>/node_modules/react/",
"<rootDir>/node_modules/react-dom/",
"<rootDir>/node_modules/react-addons-test-utils/"
]
}
And the .babelrc file is already in the root. Also babel-jest is included.

Answer 1

Have a look at the Jest documentation for Webpack integration. The problem is that Jest can’t work with other stuff than JavaScript. So you have to mock all non-JavaScript files you import. The easiest way is to configure a moduleNameMapper in your Jest configuration.
{
"jest": {
"moduleNameMapper": {
"\\.(css|scss)$": "<rootDir>/__mocks__/styleMock.js"
}
}
}
With a __mocks__/styleMock.js, that looks like this.
module.exports = {};

Answer 2

The easiest is to add an identity-obj-proxy package:
yarn add --dev identity-obj-proxy
And use it to automatically mock CSS/SCSS modules.
Add this to the package.json:
"jest": {
"moduleNameMapper": {
"\\.(css|scss)$": "identity-obj-proxy"
}
}
Or the following to jest.config.ts:
moduleNameMapper: {
'\\.(css|scss)$': 'identity-obj-proxy'
}
This way (S)CSS module class names will be automatically retrieved in tests.
Here is the source.

Answer 3

npm i -D identity-obj-proxy
Add the below to file jest.config.js
moduleNameMapper: {
"\\.(css|less|scss|sass)$": "identity-obj-proxy"
}
File jest.config.js:
testEnvironment: 'jsdom',

Answer 4

The way I got away with this was by adding these two lines to my .babelrc file:
{
"presets": ["env", "react"],
"plugins": ["transform-class-properties"]
}
And my package.json file looks like this:
{
"name": "crud-redux",
"version": "0.1.0",
"private": true,
"dependencies": {
"react": "^16.4.0",
"react-dom": "^16.4.0",
"react-scripts": "1.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "NODE_ENV=test jest",
"eject": "react-scripts eject"
},
"devDependencies": {
"babel-jest": "^18.0.0",
"babel-loader": "^6.4.1",
"babel-plugin-transform-decorators-legacy": "^1.3.5",
"enzyme": "^2.9.1",
"jest": "^23.1.0",
"react-addons-test-utils": "^15.6.2",
"react-test-renderer": "^15.6.2",
"redux-mock-store": "^1.5.1",
"webpack": "^1.15.0",
"webpack-dev-server": "^1.16.5"
}
}