SyntaxError: Invalid or unexpected token when testing react application with babel and jest

Question

I am trying to set up testing in my react project which is compiled with Webpack. When I run my test suite (consisting of one simple test) I get the error SyntaxError: Invalid or unexpected token. I've searched everywhere for the solution and none of the solutions I have attempted have been able to fix my issue.

I am using Babel and have the following packages installed

{
    "@babel/core": "^7.5.5",
    "@babel/preset-es2015": "^7.0.0-beta.53",
    "@babel/preset-stage-0": "^7.0.0",
    "@babel/register": "^7.4.4",
    "babel-jest": "^24.8.0",
    "babel-plugin-transform-es2015-modules-commonjs": "^6.26.2",
}

Furthermore, the version of jest and react-test-rendered I am using is:

{
    "jest": "^24.8.0",
    "react-test-renderer": "^16.9.0",
}

My .babelrc file looks like so

{
    "presets": [["@babel/preset-env", {"targets": {"node": "current"}}], "@babel/preset-react"],
    "plugins": ["transform-es2015-modules-commonjs", "@babel/plugin-proposal-class-properties"],
    "env": {
        "test": {
            "presets": [["@babel/preset-env", {
                "debug": false,
                "targets": {
                    "browsers": [
                        "last 3 versions"
                    ]
                }
            }],"@babel/preset-react"]
        }
    }
}

Finally, I added some jest config to my package.json which is like so:

"jest": {
        "verbose": true,
        "moduleFileExtensions": [
            "js",
            "jsx",
            "json"
        ],
        "transform": {
            "^.+\\.(js|jsx)?$": "babel-jest"
        },
        "moduleNameMapper": {
            "^@/(.*)$": "<rootDir>/src/$1"
        },
        "transformIgnorePatterns": [
            "node_modules/?!(react-icons)"
        ]
    }

Some of the above are from searching around and trying different solutions.

For reference, the syntax error is as follows:

SyntaxError: Invalid or unexpected token

      11 | 
      12 | // Import styles
    > 13 | import Styles from './button.module.scss';
         | ^
      14 | 
      15 | /**
      16 |  * Test

The full test file looks like so:

import React from 'react';
import { Button } from "./button";
import renderer from 'react-test-renderer';

test('Button renders', _ => {

    const button = renderer.create(
        <Button text={"Hello World"} onClick={_ => {console.log("Button clicked.")}}/>
    );

    let tree = button.toJSON();
    expect(tree).toMatchSnapshot();

    const text = tree.props.text;
    expect(text).toEqual("Hello World")
});

Ideally, this test should pass however I suspect that for some reason Jest is not transforming my code into es2015 standard hence the syntax error. If anybody knows of the solution or has encountered this before I would be very grateful for any assistance.

I have not provided my webpack config as I understand that in this context webpack is not being used to the Jest testing.

Thank you in advance!

Answer 1

I figured out the answer to this. It turns out that the issue was not regarding transpilation of the javascript but instead the importing of the sass file.

I had to make the following configuration changes to my package.json.

"jest": {
        "moduleFileExtensions": [
            "js",
            "jsx"
        ],
        "moduleDirectories": [
            "node_modules",
            "bower_components",
            "shared"
        ],
        "moduleNameMapper": {
            "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
            "\\.(css|less|scss)$": "identity-obj-proxy"
        },
        "setupFilesAfterEnv": [
            "jest-enzyme"
        ],
        "testEnvironment": "enzyme",
        "testEnvironmentOptions": {
            "enzymeAdapter": "react16"
        }
    }

My fileMocks.js file contains:

module.exports = 'test-file-stub';

This is set up specifically to work for css modules in react.