Why react-testing-library is showing reference error - reactjs

Question

I'm trying to run a simple test using react-testing-library, this under a react project without create-react-app (CRA) I have a basic webpack config and don't know if I need to setup anything else.
Here is the test
import React from "react";
import "#testing-library/jest-dom/extend-expect";
import { render } from "#testing-library/react";
import { prettyDOM } from "#testing-library/dom";
import Button from "./Button";
test("renders content", () => {
const props = {
text: "Test",
size: "lg",
color: "black",
type: "submit",
buttonClass: "button-oaauth-signup",
fullWidth: true,
};
const component = render(<Button {...props} />);
component.getByText("Test");
});
Here is my package.json
{
"name": "firmavirtual",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "webpack --mode=development",
"build": "webpack --mode=production",
"dev": "webpack-dev-server",
"test": "jest"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"#babel/core": "^7.15.8",
"#babel/preset-env": "^7.15.8",
"#babel/preset-react": "^7.14.5",
"#svgr/webpack": "^5.5.0",
"#testing-library/jest-dom": "^5.15.0",
"#testing-library/react": "^12.1.2",
"babel-jest": "^27.3.1",
"babel-loader": "^8.2.3",
"css-loader": "^6.5.0",
"file-loader": "^6.2.0",
"jest": "^27.3.1",
"node-sass": "^6.0.1",
"react-test-renderer": "^17.0.2",
"sass-loader": "^12.2.0",
"style-loader": "^3.3.1",
"svg-url-loader": "^7.1.1",
"webpack": "^5.60.0",
"webpack-cli": "^4.9.1",
"webpack-dev-server": "^4.3.1"
},
"dependencies": {
"#emotion/react": "^11.5.0",
"#emotion/styled": "^11.3.0",
"#mui/icons-material": "^5.0.5",
"#mui/material": "^5.0.6",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-google-login": "^5.2.2",
"react-hook-form": "^7.18.0",
"react-icons": "^4.3.1",
"react-router-dom": "^5.3.0"
}
}
Here is my webpack.config.js
const webpack = require("webpack");
const path = require("path");
module.exports = {
mode: "development",
entry: "./src/index.js",
resolve: {
extensions: [".js", ".json", ".jsx", ".scss", ".svg", ".png", ".jpg"],
modules: [path.resolve(__dirname, "src"), "node_modules"],
},
output: {
filename: "bundle.js",
path: path.join(__dirname, "public"),
},
plugins: [new webpack.HotModuleReplacementPlugin({})],
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules|bower_components/,
loader: "babel-loader",
options: {
presets: ["#babel/env", "#babel/preset-react"],
},
},
{
test: /\.js$/,
exclude: /node_modules/,
loader: "babel-loader",
},
{
test: /\.scss$/,
use: ["style-loader", "css-loader", "sass-loader"],
},
{
test: /\.svg$/,
use: ["#svgr/webpack"],
},
{
test: /\.(woff(2)?|ttf|eot)(\?v=\d+\.\d+\.\d+)?$/,
use: [
{
loader: "file-loader",
options: {
name: "[name].[ext]",
outputPath: "assets/fonts/",
},
},
],
},
],
},
devtool: "eval-cheap-module-source-map",
devServer: {
static: path.join(__dirname, "public"),
port: 5000,
},
};
Running npm run test show this error
> firmavirtual#1.0.0 test
> jest
FAIL src/components/buttons/Button.test.js
✕ renders content (2 ms)
● renders content
The error below may be caused by using the wrong test environment, see https://jestjs.io/docs/configuration#testenvironment-string.
Consider using the "jsdom" test environment.
ReferenceError: document is not defined
15 | };
16 |
> 17 | const component = render(<Button {...props} />);
| ^
18 |
19 | component.getByText("Inicio con Google");
20 | });
at render (node_modules/#testing-library/react/dist/pure.js:83:5)
at Object.<anonymous> (src/components/buttons/Button.test.js:17:21)
Test Suites: 1 failed, 1 total
Tests: 1 failed, 1 total
Snapshots: 0 total
Time: 5.179 s
Ran all test suites.
Any idea how to fix this?

Answer 1

Well I guess I needed to search a little more
In jest.config.js add
module.exports = {
// Add the correct environment
testEnvironment: "jsdom",
moduleNameMapper: {
"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":
"<rootDir>/__mocks__/fileMock.js",
"\\.(css|less)$": "identity-obj-proxy",
},
};
That solved the problem. Silly me