Test failures during styles file imports

Question

Encountering issues with setting up Jest for React without the use of Create-React-App.
I do not want to use CRA thus sticking with babel and webpack config setup which does work less Jest.

Jest itself is working fine for testing. It only fails when a component has a css/scss file import.
Seen many similar issues here and tried out the solutions but the issue persists.

Could I get some help with what am doing wrong pls? Thanks.

These are some of the solutions I have tried out which is not working for me.

Tried accepted solution and also the other 2 solutions for this: jest unexpected token when importing css
A Medium Blog with similar solution
https://stackoverflow.com/questions/51994111/jest-encountered-an-unexpected-token
Plus a couple of other examples more related to Vue but similar solution.

The error output as follows:

Jest encountered an unexpected token

Details: 

.some-class {
 ^

This is class being tested:

import React from 'react';
import '../styles/styles.scss' // line causing issue

const App = () => {

  const env = process.env.NODE_ENV;

  return (
    <div>
      <h1>sample header</h1>
      <p>{`This is in ${env} environment`}</p>
    </div>
  );
};

export default App;

The Test class

import App from "../../components/App";
import React from "react";
import {shallow} from "enzyme";

it('should get a matching snapshot',  () => {
  const wrapper = shallow(<App/>)
  expect(wrapper.find('h1').text()).toBe('sample header')
  expect(wrapper).toMatchSnapshot()
});

Styles file: styles.scss

.some-class {
  color: aliceblue;
}

package.json for reference:

{
  "name": "tar",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "cross-env NODE_ENV=beta webpack-dev-server",
    "build-prod": "cross-env NODE_ENV=production webpack -p",
    "build-beta": "cross-env NODE_ENV=beta webpack",
    "test": "jest --config=jest.config.json"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.11.6",
    "@babel/preset-env": "^7.11.5",
    "@babel/preset-react": "^7.10.4",
    "@babel/preset-typescript": "^7.10.4",
    "@types/react": "^16.9.49",
    "@types/react-dom": "^16.9.8",
    "babel-jest": "^26.6.3",
    "babel-loader": "^8.1.0",
    "cross-env": "^7.0.2",
    "css-loader": "^4.3.0",
    "enzyme": "^3.0.0",
    "enzyme-adapter-react-16": "^1.0.0",
    "enzyme-to-json": "^3.0.1",
    "file-loader": "^6.1.0",
    "html-loader": "^1.3.0",
    "html-webpack-plugin": "^4.5.0",
    "identity-obj-proxy": "^3.0.0",
    "jest": "^26.6.3",
    "jest-cli": "^26.6.3",
    "mini-css-extract-plugin": "^0.11.1",
    "node-sass": "^4.14.1",
    "raf": "^3.3.2",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "sass-loader": "^10.0.2",
    "typescript": "^4.0.2",
    "webpack": "^4.44.1",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.11.0"
  },
  "jest": {
    "moduleNameMapper": {
      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/src/tests/__mocks__/fileMock.js",
      "\\.(scss|css|less)$": "<rootDir>/src/tests/__mocks__/styleMock.js"
    }
    "transform": {
      "\\.js?x$": "<rootDir>/node_modules/babel-jest"
    }
  }
}

Inside Webpack.config.js (showing partial)

module: {
  rules: [
    {
      test: /\.s[ac]ss$/i,
      use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"]
    }
  ]
}, 

Inside . babelrc file

{
  "presets": ["@babel/react", "@babel/env"]
}

Answer 1

Looks like you forget to mock scss file during test despite having already had css|less files there.

To fix that, you have to add scss as part of current style file pattern:

package.json

{
  "jest": {
    "moduleNameMapper": {
      // ...
      "\\.(css|less|scss)$": "<rootDir>/src/tests/__mocks__/styleMock.js"
    }
  }
}

Update

You're currently input jest cli with --config=jest.config.json which is json file which is wrong (it must be js file) that ended up the issue.

The right one should be:

jest --config=jest.config.js // `js` not `json`

But you have 2 config one in jest.config.js and jest area in package.json file. Please try to use one place instead by either remove --config=jest.config.js in CLI or move entire jest block into the config file.