vitest-dev / vitest-dev/vitest

Error with PropTypes and React SVG in vitest: TypeError: PropTypes.oneOf is not a function

Open
#3,741 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

pending triage
Dominant language
TypeScript
Stars
17.1k
Forks
2k
Avg merge
1d 22h
Merged PRs (30d)
94

Description

Describe the bug

We have a react component library package called react-ui-library, which provides various components like buttons, text fields, and more. We are encountering an issue while testing our components using enzyme in vitest.

To ensure the parent app installs "prop-types" dep, we have listed it as a peerDependency in react-ui-library. However, within our react-ui-library package, there is a sub package called react-svg that also relies on "prop-types".

The problem arises when attempting to run the test in consumer project , as it throws an error message stating: "TypeError: PropTypes.oneOf is not a function". The error occurs at the following path: node_modules/@oliasoft-open-source/react-ui-library/node_modules/react-svg/dist/react-svg.esm.js:184:26.

It seems that the path is incorrect because our bundled package does not contain a node_modules folder. Interestingly, the tests work fine when using Jest, which leads us to suspect a path configuration bug in vitest. It appears that vitest is attempting to access the wrong node_modules directory.

Reproduction

https://github.com/bpetii/vitest-issue-reproduction

Steps to reproduce

Run yarn
Run yarn run test-vitest for failing test
OR
Run yarn run test-jest for successful test

System Info
System:
    OS: macOS 13.2.1
    CPU: (12) arm64 Apple M2 Pro
    Memory: 231.84 MB / 32.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 18.16.0 - /opt/homebrew/bin/node
    Yarn: 1.22.19 - /opt/homebrew/bin/yarn
    npm: 9.5.1 - /opt/homebrew/bin/npm
  Browsers:
    Chrome: 114.0.5735.198
    Safari: 16.3
Used Package Manager

yarn

Validations

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Clone the linked reproduction, run yarn, then compare yarn run test-vitest with yarn run test-jest. Start from the failing react-svg/dist/react-svg.esm.js:184:26 path and investigate how the consumer project's prop-types dependency is resolved. Done means the Vitest test passes with the bundled package and correct PropTypes behavior.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend, testing-qa
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
38/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.