Skip to content

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

@ubugnu

Description

@ubugnu

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!

Metadata

Metadata

Assignees

No one assigned

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions