create-react-app icon indicating copy to clipboard operation
create-react-app copied to clipboard

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

Open ubugnu opened this issue 1 year ago • 2 comments

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!

ubugnu avatar May 12 '24 18:05 ubugnu

Thank you, it helps me a lot.

cumt-robin avatar Jul 17 '24 07:07 cumt-robin

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

BretHudson avatar Aug 25 '24 18:08 BretHudson