I'm using jest for the first time to test this App component of a React app:

// External deps
import React from "react";
import ReactDOM from "react-dom";

// Project-specific deps
import "../index.css";
import App from "../../App"; // Top-level component to be rendered
import {constants} from "../constants.mjs"; // Get general constants of project

describe("Pass props properly", () => {
    test("Check each props mapping.", () => {
        const root = document.createElement("div");
        var props = {
            now: new Date(), // Current date and time
            }
        ReactDOM.render(<App {...props}/>, root);
        expect(App).toHaveBeenCalledWith(props);
    });
  });

When I run a custom test, it fails and Jest throws a SyntaxError saying Support for the experimental syntax 'jsx' isn't currently enabled and suggests to Add @babel/plugin-transform-react-jsx (https://git.io/vb4yd) to the 'plugins' section of your Babel config to enable transformation.

However, despite installing the @babel/plugin-transform-react-jsx plugin with node & yarn—both as normal and dev dependencies—the error persists. What else I've tried:

• Creating this babel.config.json at the project root (I followed Babel's config instructions, except for step #2, here)
  • { "presets": [["@babel/preset-env", { "targets": { "node": "current" } }]] }

Could it be an improper file hierarchy? Too many installs of the plugin messing with each other? Is there a good way to ensure Babel is enabled/working? Is the issue with Jest's config?