Jest Unexpected Identifier require - reactjs

Question

I'm trying to set up Jest to test my app as it grows. I'm getting the below error:
SyntaxError: Unexpected identifier
> 1 | const screenSize = require("../src/index.js").screenSize;
| ^
I'm using Phaser 3, Webpack, Babel, and React.
I'm relatively new to all except React.
I followed Jest's Getting Started tutorial and using with webpack tutorial, but I'm still getting the error.
package.json
{
"name": "phaser3-project-template",
"version": "1.1.0",
"description": "A Phaser 3 Project Template",
"main": "src/index.js",
"scripts": {
"build": "webpack --config webpack/prod.js ",
"start": "webpack-dev-server --config webpack/base.js --open",
"test": "jest"
},
"repository": {
"type": "git",
"url": "git+https://github.com/photonstorm/phaser3-project-template.git"
},
"author": "Richard Davey <rdavey#gmail.com> (http://www.photonstorm.com)",
"license": "MIT",
"licenseUrl": "http://www.opensource.org/licenses/mit-license.php",
"bugs": {
"url": "https://github.com/photonstorm/phaser3-project-template/issues"
},
"homepage": "https://github.com/photonstorm/phaser3-project-template#readme",
"devDependencies": {
"#babel/core": "^7.4.3",
"#babel/plugin-proposal-class-properties": "^7.4.0",
"#babel/preset-env": "^7.4.3",
"#babel/preset-react": "^7.0.0",
"babel-jest": "^24.7.1",
"babel-loader": "^8.0.5",
"clean-webpack-plugin": "^1.0.0",
"file-loader": "^3.0.1",
"html-webpack-plugin": "^3.2.0",
"jest": "^24.7.1",
"path": "^0.12.7",
"raw-loader": "^1.0.0",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"terser-webpack-plugin": "^1.2.1",
"webpack": "^4.28.3",
"webpack-cli": "^3.2.1",
"webpack-dev-server": "^3.1.14",
"webpack-merge": "^4.2.1"
},
"dependencies": {
"babel-core": "^6.26.3",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"css-loader": "^2.1.1",
"phaser": "^3.16.2",
"react-redux": "^7.0.2",
"redux": "^4.0.1",
"redux-thunk": "^2.3.0",
"style-loader": "^0.23.1"
},
"jest": {
"modulePaths": [
"node_modules"
],
"moduleFileExtensions": [
"js",
"jsx"
],
"moduleDirectories": [
"node_modules"
],
"moduleNameMapper": {
"\\.(css|less)$": "<rootDir>/__mocks__/styleMock.js",
"\\.(gif|ttf|eot|svg)$": "<rootDir>/__mocks__/fileMock.js"
}
}
}
webpack/base.js
const webpack = require("webpack");
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const CleanWebpackPlugin = require("clean-webpack-plugin");
module.exports = {
mode: "development",
devtool: "eval-source-map",
entry: "./src/index.js", //do we need this?
output: {
path: path.resolve("dist"),
filename: "index_bundle.js"
},
module: {
rules: [
{
test: /\.css$/,
use: [{ loader: "style-loader" }, { loader: "css-loader" }]
},
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.jsx?$/,
exclude: /node_modules/,
use: "babel-loader"
},
{
test: [/\.vert$/, /\.frag$/],
use: "raw-loader"
},
{
test: /\.(gif|png|jpe?g|svg|xml)$/i,
use: "file-loader"
}
]
},
plugins: [
new CleanWebpackPlugin(["dist"], {
root: path.resolve(__dirname, "../")
}),
new webpack.DefinePlugin({
CANVAS_RENDERER: JSON.stringify(true),
WEBGL_RENDERER: JSON.stringify(true)
}),
new HtmlWebpackPlugin({
template: "./index.html",
filename: "index.html",
inject: "body"
})
]
};
.babelrc.js
const presets = [
[
"#babel/env",
{
targets: {
browsers: [">0.25%", "not ie 11", "not op_mini all"],
node: "current"
},
modules: false
}
],
"#babel/preset-react"
];
const plugins = ["#babel/plugin-proposal-class-properties"];
module.exports = { presets, plugins };
jest.config.js
"use strict";
module.exports = {
testMatch: ["<rootDir>/**/*.test.js"],
testPathIgnorePatterns: ["/src/", "node_modules"]
};
index.test.js
const screenSize = require("../src/index.js").screenSize;
//import toBeType from "jest-tobetype";
console.log(screenSize);
test("screenSize is an object", () => {
expect(typeof screenSize).toBe("object");
});
Github Repo
How can I get Jest to process the es6 syntax?

Answer 1

Require is a node environment syntax for importing variables, and Jest runs in node. More background on the differences between import/require and node can be seen in this SO question
You can add support for this with
npm install --save-dev #babel/plugin-proposal-class-properties #babel/plugin-transform-modules-commonjs
and include these as presets in your babelrc.js
const presets = [
[
"#babel/env",
{
targets: {
browsers: [">0.25%", "not ie 11", "not op_mini all"]
},
modules: false
}
],
"#babel/preset-react"
];
const plugins = [
"#babel/plugin-proposal-class-properties",
"#babel/plugin-transform-modules-commonjs"
];
module.exports = { presets, plugins };
The above code will still run into a number of errors details to resolve those can be seen here: https://medium.com/#Tnodes/setting-up-jest-with-react-and-phaser-422b174ec87e