Skip to content

S2 and Vitest not working with collections #8446

@snowystinger

Description

@snowystinger

Provide a general summary of the issue here

Issue reported in Slack:

Tab component won't render in my test with a cannot be rendered out of a collection error, but renders in the browser without error. When attempting to duplicate it on CodeSandbox, I discovered it uses pnpm for package management and everything worked fine. However, I can duplicate the failing test on CodeSandbox using yarn and npm to install the packages.

To troubleshoot, I used the React (TS) template on CodeSandbox. I added @react-spectrum/s2 (v0.9.2) and added a Tab component. Everything rendered fine, like I am seeing locally. I added a test that checks if the component renders and there were no errors in CodeSandbox.

After a lot more troubleshooting, I realized the difference was the package manager used in the template was pnpm. After removing that lock file and the node_modules folder on CodeSandbox, I did an install with npm and the test failed, like I was seeing locally. I did the same thing with yarn on CodeSandbox and the test failed with that set-up as well.

After all that investigation, I used pnpm locally and it fixes the failing test. Why would there be problems with the Tab component when using yarn and npm?

To duplicate use the following links and run npm run test in the terminal which will run App.test.tsx.
CodeSandbox with pnpm - working
CodeSandbox with npm - failing
CodeSandbox with yarn - failing

the path on the module throwing the error is very strange
node_modules/@react-aria/collections/dist/packages/@react-aria/collections/src/CollectionBuilder.tsx
this path doesn’t exist
so maybe something with how it’s resolving imports?
looks like it works in the browser, and i’d expect the dev and test to use the same module resolution

🤔 Expected Behavior?

It should work in vitest with all package managers

😯 Current Behavior

It fails with cannot be rendered out of a collection

💁 Possible Solution

No response

🔦 Context

No response

🖥️ Steps to Reproduce

Download the codesandboxes and run npm run test

Version

S2 0.9.0

What browsers are you seeing the problem on?

Other

If other, please specify.

vitest's jsdom or happy dom, whichever it uses

What operating system are you using?

Mac 15.5

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions