using jest vs react-scripts test

You arrived at the answer yourself. To use jest your tests need to go through babel for the runner to understand react syntax. take a look at the babel-doc to understand it at greater detail. it's just a transformation tool that transforms fancy syntax into something javascript understands. install the following plugins and presets.

Presets

npm i --save @babel/preset-env
npm i --save @babel/preset-react

Plugins

npm install --save babel-plugin-transform-export-extensions

in your .babelrc add the following lines:

{
  "env": {
    "test": {
      "presets": [
        "@babel/preset-env",
        "@babel/preset-react"
      ],
      "plugins": [
        "transform-export-extensions",
      ],
      "only": [
        "./**/*.js",
        "node_modules/jest-runtime"
      ]
    }
  }
}

Now try running jest on the command-line from your project directory to make sure your tests are configured correctly.

react-scripts is a preconfigured set of commands that come out of the box with create-react-app if you want to use that instead of jest command, check here.

react-scripts expects your tests folder location to follow a certain convention. this is probably why the tests weren't getting fetched when the react-scripts test command was run out of the box.

in package.json change

 "scripts": {
    "test": "jest",
  },

to the following:

 "scripts": {
    "test": "react-scripts test",
  },

i.e. don't change to jest in the first place