React Babel/Jest initial setup - reactjs

Question

I'm currently trying to set up Jest in my React project. I have created a simple snapshot test for App.js. I heard that you cannot run Jest without Babel so I used npm i babel-jest to install them both at the same time. I feel like I have done everything the normal tutorials have asked me to do. However, when I run `npm run test' I get the following error message:
PS C:\XXXXXXXXXXX\git\react-project\client> npm run test
> react-project#0.1.0 test C:\XXXXXXXXXXXX\git\react-project\client
> jest
FAIL src/App.test.js
● Test suite failed to run
SyntaxError: C:\XXXXXXXXXX\git\react-project\client\src\App.test.js: Support for the experimental syntax 'jsx' isn't currently enabled (6:32):
4 |
5 | it ('renders correctly', () => {
> 6 | const tree = renderer.create(<App />).toJSON();
| ^
7 | expect(tree).toMatchSnapshot();
8 | });
Add #babel/preset-react (https://git.io/JfeDR) to the 'presets' section of your Babel config to enable transformation.
If you want to leave it as-is, add #babel/plugin-syntax-jsx (https://git.io/vb4yA) to the 'plugins' section to enable parsing.
at Parser._raise (node_modules/#babel/parser/src/parser/error.js:60:45)
at Parser.raiseWithData (node_modules/#babel/parser/src/parser/error.js:55:17)
at Parser.expectOnePlugin (node_modules/#babel/parser/src/parser/util.js:157:18)
at Parser.parseExprAtom (node_modules/#babel/parser/src/parser/expression.js:1180:18)
at Parser.parseExprSubscripts (node_modules/#babel/parser/src/parser/expression.js:563:23)
at Parser.parseUpdate (node_modules/#babel/parser/src/parser/expression.js:543:21)
at Parser.parseMaybeUnary (node_modules/#babel/parser/src/parser/expression.js:527:17)
at Parser.parseExprOps (node_modules/#babel/parser/src/parser/expression.js:343:23)
at Parser.parseMaybeConditional (node_modules/#babel/parser/src/parser/expression.js:308:23)
at Parser.parseMaybeAssign (node_modules/#babel/parser/src/parser/expression.js:263:21)
Test Suites: 1 failed, 1 total
Tests: 0 total
Snapshots: 0 total
Time: 4.303 s
Ran all test suites.
(node:15304) ExperimentalWarning: The fs.promises API is experimental
I feel like the solution is in this error message but I can really understand what they are asking me to do here. Any help would be great! Let me know if you need any more information!
react-project\package.json
{
"name": "react-project",
"version": "1.0.0",
"scripts": {
"client": "cd client && yarn start",
"server": "nodemon server.js"
},
"dependencies": {
"body-parser": "^1.18.3",
"express": "^4.16.4"
},
"devDependencies": {
"concurrently": "^4.0.1",
"nodemon": "^2.0.4"
}
}
react-project\server\server.js
const express = require('express');
const bodyParser = require('body-parser');
const app = express();
const port = process.env.PORT || 5000;
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
app.get('/api/hello', (req, res) => {
res.send({ express: 'Helo From Express' });
});
app.post('/api/world', (req, res) => {
console.log(req.body);
res.send(
`I received your POST request. This is what you sent me: ${req.body.post}`,
);
});
app.listen(port, () => console.log(`Listening on port ${port}`));
react-project\client\App.js
import React from 'react';
import './App.css';
function App() {
return (
<div className="App">
Hello
</div>
);
}
export default App;
react-project\client\App.test.js
import React from 'react';
import { renderer } from "#testing-library/react";
import App from './App';
it ('renders correctly', () => {
const tree = renderer.create(<App />).toJSON();
expect(tree).toMatchSnapshot();
});
react-project\client\package.json
{
"name": "react-project",
"version": "0.1.0",
"private": true,
"dependencies": {
"babel-jest": "^26.3.0",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-scripts": "3.4.3"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "jest",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"#babel/core": "^7.11.6",
"#babel/node": "^7.10.5",
"#babel/plugin-transform-react-jsx": "^7.10.4",
"#babel/preset-env": "^7.11.5",
"jest": "^26.4.2",
"nodemon": "^2.0.4"
}
}