React tests are not working after building it by Webpack - reactjs

Question

I have an issue that I'm spending a lot of time to seek a solution.
Previously my project was build by CRA and used react-scripts. Test script was working. For test I used react-testing-library (now implemented to react by default).
Actually it has changed and now app is built by webpack. I tried to implement jest and test, but I cannot configure it in proper way.
I tried:
install jest and babel-jest
add jest.config.js / jest.config.json
But still jest is sending me this information:
Jest encountered an unexpected token
This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.
By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".
Here's what you can do:
• To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
• If you need a custom transformation specify a "transform" option in your config.
• If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.
You'll find more details and examples of these config options in the docs:
https://jestjs.io/docs/en/configuration.html
Error shows whenever it meets React syntax
it("renders without crashing", () => {
6 | const div = document.createElement("div")
> 7 | ReactDOM.render(<App/>, div)
| ^
8 | })
My webpack config:
let path = require("path")
module.exports = {
entry: {
app: "./src/index.js",
},
output: {
filename: "[name].js",
path: path.resolve(process.cwd(), "name/static/js"),
},
module: {
rules: [
{
test: /\.m?js$/,
exclude: /(node_modules)/,
use: {
loader: "babel-loader",
options: {
presets: ["#babel/preset-env", "#babel/preset-react"],
},
},
},
{
test: /\.css$/,
use: ["style-loader", "css-loader"],
},
],
},
}
package.json
{
"name": "app-name",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/user-event": "^7.1.2",
"axios": "^0.19.2",
"bootstrap": "^4.4.1",
"formik": "^2.1.4",
"json-server": "^0.16.1",
"lodash": "^4.17.15",
"react": "^16.13.0",
"react-input-mask": "^2.0.4",
"react-simple-timefield": "^3.0.0",
"reactstrap": "^8.4.1",
"yup": "^0.28.3"
},
"scripts": {
"test": "jest",
"start-dev": "webpack --progress --colors --watch --config webpack.dev.js",
"build": "webpack --progress --colors --config webpack.prod.js"
},
"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",
"last 1 edge version"
]
},
"devDependencies": {
"#babel/core": "^7.9.0",
"#babel/plugin-transform-react-jsx": "^7.9.4",
"#babel/preset-env": "^7.9.0",
"#babel/preset-react": "^7.9.4",
"#testing-library/dom": "^7.1.0",
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.5.0",
"babel-jest": "^25.5.0",
"babel-loader": "^8.1.0",
"css-loader": "^3.4.2",
"enzyme": "^3.11.0",
"enzyme-adapter-react-16": "^1.15.2",
"jest": "^25.5.0",
"react-dom": "^16.13.1",
"react-snapshot": "^1.3.0",
"react-test-renderer": "^16.13.1",
"style-loader": "^1.1.3",
"webpack": "^4.42.1",
"webpack-cli": "^3.3.11",
"webpack-merge": "^4.2.2"
}
}
},
My purpose is to be available to run tests with this configuration.

Answer 1

I found solution here: https://codesandbox.io/s/github/kentcdodds/react-testing-library-examples
as I script in package.json it should be just "test": "jest" and add in package.json
"babel": {
"presets": [
"react-app"
]
},
There is a need to create new file jest.config.js with code:
const path = require('path')
module.exports = {
roots: [path.resolve(__dirname, './src')],
testEnvironment: 'jest-environment-jsdom-sixteen',
displayName: 'tests',
testMatch: ['**//__tests__/**/*.js', '**/?(*.)+(spec|test).[jt]s?(x)'],
testURL: 'http://localhost',
setupFilesAfterEnv: [path.resolve(__dirname, './src/setupTests.js')],
}
My test files are in src/__ tests __/ folder and they have extension .test.js (i.e. app.test.js)
Add file setupTests.js, which contains:
import '#testing-library/jest-dom/extend-expect'
After that install jest-environment-jsdom-sixteen and babel-preset-react-app.
At last npm test should work and run all tests contained in __test__ folder.