search

facebook / create-react-app

Set up a modern web app by running one command.
https://create-react-app.dev
MIT License
102.49k stars 26.77k forks source link

Property 'toBeInTheDocument' does not exist when using cra inside a monorepo #13585

Open ubugnu opened 3 months ago

ubugnu commented 3 months ago

There is an issue with types when using create-react-app inside a monorepo.

Here are the steps to reproduce the bug:

pnpm init
# create a pnpm-workspace.yaml file
cat pnpm-workspace.yaml
packages:
  - "apps/**"
# create a react app, node_modules will be created on the app folder, not the monorepo root
pnpm create react-app@latest apps/test-app test --template typescript
# at this point, if we run start, everything goes as planned
pnpm --filter test-app start
# we delete the apps/test-app/node_modules folder and mimic a real monorepo install
rm -fr apps/test-app/node_modules
pnpm install
# now node_modules is at the monorepo root, but ...
pnpm --filter test-app start # we'll get error: Property 'toBeInTheDocument' does not exist on type 'JestMatchers<HTMLElement>'.

I found that adding this dependency fixes the issue

  "dependencies": {
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "@types/testing-library__jest-dom": "^5.14.9", <-- ADD THIS
    "@types/jest": "^27.5.2",
    "@types/node": "^16.18.97",
    "@types/react": "^18.3.2",
    "@types/react-dom": "^18.3.0",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-scripts": "5.0.1",
    "typescript": "^4.9.5",
    "web-vitals": "^2.1.4"
  }

Run install again:

pnpm install # it works!
cumt-robin commented 1 month ago

Thank you, it helps me a lot.

BretHudson commented 1 week ago

Many thanks, can confirm it works with Node v20 / React CRA v5.0.1