Receiving error 'SyntaxError: Unexpected identifier' for import statement using Jest with React

Question

Previously, Jest worked fine with import statements; however, upon installing the dependency 'react-router-transition' I am unable to perfrom any tests and receive the following error:

` FAIL src/pages/Costs/Costs.test.js ● Test suite failed to run

/Users/***/Code/cmp/cmp-client-portal/node_modules/react-router-transition/lib/index.js:5
import React, { cloneElement, createElement, useEffect, useRef, useState } from 'react';
       ^^^^^

SyntaxError: Unexpected identifier

> 1 | import { spring } from "react-router-transition"
    | ^
  2 | // we need to map the `scale` prop we define below
  3 | // to the transform style property
  4 | function mapStyles(styles) {

  at ScriptTransformer._transformAndBuildScript (node_modules/@jest/transform/build/ScriptTransformer.js:537:17)
  at ScriptTransformer.transform (node_modules/@jest/transform/build/ScriptTransformer.js:579:25)
  at Object.<anonymous> (src/utils/transitions/fadeInOutBounce.js:1:1)

Test Suites: 1 failed, 1 total Tests: 0 total Snapshots: 0 total Time: 2.83s Ran all test suites matching /src/pages/Costs/i.`

Answer 1

Solution was to update react scripts to the latest version.

The old version of react-scripts clearly had a misconfigured babel loader for jest, and was therefore not correctly transforming code during testing.