What can I do about this error: ReferenceError: MutationObserver is not defined

[REDLIGHTFILMS]

So I work with the "react-testing-library" and I have already done this: "npm i mutationobserver-shim" and it still throws the error. This is my code:

import React from "react";
import Popup from "../Popup";
import { render } from '@testing-library/react';
import '@testing-library/jest-dom/extend-expect'

describe("testing PopupComponent", () => {
    it("should add correctly", () => {
        const { getByTestId } = render(<Popup open={true} />);

        expect(getByTestId('textfield-name')).toHaveTextContent("");
        
    })
})

This is my package-json:

{
  "name": "market-research-app",
  "version": "0.1.0",
  "private": true,
  "proxy": "http://localhost:5000",
  "dependencies": {
    "@material-ui/core": "^4.9.14",
    "@material-ui/icons": "^4.9.1",
    "@types/classnames": "^2.2.10",
    "@types/lorem-ipsum": "^2.0.0",
    "@types/node": "^12.12.38",
    "@types/react": "^16.9.35",
    "@types/react-dom": "^16.9.8",
    "@types/react-router-dom": "^5.1.5",
    "@types/react-table": "^7.0.19",
    "@types/react-virtualized": "^9.21.10",
    "axios": "^0.19.2",
    "classnames": "^2.2.6",
    "clsx": "^1.1.1",
    "little-state-machine": "^3.0.2",
    "lorem-ipsum": "^2.0.3",
    "mutationobserver-shim": "^0.3.7",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-hook-form": "^5.7.2",
    "react-router-dom": "^5.2.0",
    "react-scripts": "3.4.1",
    "react-table": "^7.1.0",
    "react-virtualized": "^9.21.2",
    "runtypes": "^4.2.0",
    "typescript": "^3.7.5"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "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": {
    "@testing-library/dom": "^7.16.1",
    "@testing-library/jest-dom": "^5.10.1",
    "@testing-library/react": "^9.5.0",
    "@testing-library/react-hooks": "^3.3.0",
    "@testing-library/user-event": "^7.2.1"
  }
}

This is the Code with the data-testid:

<fieldset style={{ border: "none" }}>
      <TextField
           style={{ marginBottom: 10 }}
           label="Name"
           variant="outlined"
           name="basicData.name"
           inputRef={register({ required: "Dies ist erforderlich" })}
           type="text"
           data-testid="textfield-name"
     />
    <ErrorMessage style={{ padding:0 , margin:0 }} errors={errors} name="basicData.name" as="p" />
</fieldset>

What can I do? How can I correct this error?

[keiya01]

I think you have to import mutationobserver-shim.
If you are using jest, refer the following URL.
https://jestjs.io/docs/en/configuration#setupfiles-array

[REDLIGHTFILMS]

So I tried to create a setup.ts and a config.jest.js, but how is this going to work if I don't have jest installed because I use the testing library? I don't really understand that...

[REDLIGHTFILMS]

But it says I should put the setup.ts into my test, but I can't import such a file or how is that meant?

[keiya01]

I think you should add testing library (like jest, mocha). I think testing-library is utility library that make testing easy.
How do you test ?

[bluebill1049]

Question like this is outside the scope of this lib as well.

[REDLIGHTFILMS]

I have managed it :)