ReferenceError: expect is not defined when using #testing-library/react - reactjs

Question

I'm learning to write a test for my react typescript app and come across this problem. I tried to use many different methods I found on internet but nothing work, the error is
Test suite failed to run
ReferenceError: expect is not defined
at Object.<anonymous> (node_modules/#testing-library/jest-dom/dist/extend-expect.js:7:1)
at Object.<anonymous> (node_modules/#testing-library/jest-dom/extend-expect.js:2:1)
This is my App.test.tsx file. Where error occur.
import React from 'react';
import App from './App';
import {render, fireEvent, waitFor, screen} from '#testing-library/react'
import "#testing-library/jest-dom/extend-expect";
import '#testing-library/jest-dom'
test('renders learn react link',async () => {
let screen = render(<App></App>);
expect(screen.getByText(/Hello/i)).toBeInTheDocument()
});
My package.json file
{
"dependencies": {
"#emotion/react": "^11.7.1",
"#emotion/styled": "^11.6.0",
"#fontsource/roboto": "^4.5.1",
"#mui/material": "^5.2.7",
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^12.1.2",
"#testing-library/user-event": "^7.1.2",
"#types/jest": "^27.4.0",
"#types/node": "^17.0.8",
"#types/react": "^17.0.38",
"#types/react-dom": "^17.0.11",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-scripts": "3.4.1",
"ts-jest": "^27.1.2",
"typescript": "^4.5.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"devDependencies": {
"#babel/preset-env": "^7.16.7",
"#babel/preset-react": "^7.16.7",
"babel-jest": "^27.4.6",
"jest": "^27.4.7",
"react-test-renderer": "^17.0.2"
}
}
And these are my jest.config.js and bebel.config.js file (Not sure if this matter)
module.exports = {
roots: ["<rootDir>/src"],
testMatch: [
"**/__tests__/**/*.+(ts|tsx|js)",
"**/?(*.)+(spec|test).+(ts|tsx|js)",
],
transform: {
"^.+\\.(ts|tsx)$": "ts-jest",
},
coveragePathIgnorePatterns: [
"/node_modules/"
],
moduleNameMapper: {
"\\.(css|less)$": "identity-obj-proxy",
},
"setupFiles": [
"<rootDir>/src/setupTests.ts"
]
};
module.exports = function (api) {
const presets = [
'#babel/preset-env',
'#babel/preset-react',
'#babel/preset-flow'
];
const plugins = [
'#babel/plugin-transform-runtime',
];
api.cache(false);
return {
presets,
plugins
};
};

Answer 1

delete node_modules directory and do npm install
also replace the "setupFiles" with setupFilesAfterEnv in jest.config.js like following
setupFilesAfterEnv: [
'./setupTests.js',
],
try this in App.test.tsx
import React from 'react';
import App from './App';
import {render, fireEvent, waitFor, screen} from '#testing-library/react'
test('renders learn react link',async () => {
let screen = render(<App/>);
expect(screen.getByText(/Hello/i)).toBeInTheDocument()
});