Jest parsing fails with the simple implementation of axios
Created by: siddtheone
Describe the bug
- Execute
npx create-react-app test --template typescript
- Move to new app
cd test
- Execute tests by
npm run test
pressa
to execute all tests and observe that all tests are passing. - Install
axios
by runningnpm i axios
- Add following code to the
App.tsx
file
import axios from "axios";
import React, { useEffect } from "react";
import logo from "./logo.svg";
import "./App.css";
function App() {
useEffect(() => {
axios.get("https://jsonplaceholder.typicode.com/posts");
}, []);
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.tsx</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
export default App;
- Tests starts failing with the following error
My package.json is as below
{
"name": "test",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"@types/jest": "^27.5.2",
"@types/node": "^16.18.11",
"@types/react": "^18.0.27",
"@types/react-dom": "^18.0.10",
"axios": "^1.2.4",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"typescript": "^4.9.4",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
Did you try recovering your dependencies?
No
Which terms did you search for in User Guide?
Environment
(paste the output of the command here.)
Steps to reproduce
(Write your steps here:)
Expected behavior
(Write what you thought would happen.)
Actual behavior
(Write what happened. Please add screenshots!)
Reproducible demo
(Paste the link to an example project and exact instructions to reproduce the issue.)