vitest-dev / vitest-dev/vitest
object constructor equality checking not working with react three test renderer
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 17.1k
- Forks
- 2k
- Avg merge
- 1d 22h
- Merged PRs (30d)
- 94
Description
Describe the bug
In recent versions the @react-three/test-renderer library (used to test React Three Fiber components) has started to fail when using Vitest as test runner. I initially reported this here: https://github.com/pmndrs/react-three-fiber/issues/2856.
The bug exists because React Three Fiber does constructor equality checks when updating props that are class instances (e.g. Three.js's Vector3, Euler, Matrix4, etc.) to avoid unnecessary instantiations. But it turns out that the strict equality of the constructors fails when comparing say a Vector3 in the state of the test renderer to a Vector3 in the unit test.
The constructor equality check passes in Jest when using CJS modules, but when using Jest with ESM modules it also fails in the same way, implying that somehow there are multiple versions / imports of each class. I tried different approaches of disabling dependency optimization of three.js or making it external, but to no avail. See the discussion in https://github.com/pmndrs/react-three-fiber/issues/2856
Reproduction
https://stackblitz.com/edit/vitest-dev-vitest-hrjava?file=test/react-three.test.tsx
The reproduction above shows that the issue occurs with @react-three/test-renderer but I wasn't able to create a more minimal example without the dependency because I am not very familiar with how the test renderer works. @CodyJasonBennett might be able to shed more light on that.
System Info
System:
OS: Linux 5.0 undefined
CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
Memory: 0 Bytes / 0 Bytes
Shell: 1.0 - /bin/jsh
Binaries:
Node: 18.18.0 - /usr/local/bin/node
Yarn: 1.22.19 - /usr/local/bin/yarn
npm: 9.4.2 - /usr/local/bin/npm
pnpm: 8.6.12 - /usr/local/bin/pnpm
Used Package Manager
yarn
Validations
- Follow our Code of Conduct
- Read the Contributing Guidelines.
- Read the docs.
- Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
- Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
- The provided reproduction is a minimal reproducible example of the bug.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Run the StackBlitz reproduction, starting with test/react-three.test.tsx, and inspect the @react-three/test-renderer package involved in the failure. Trace why constructor equality differs between the test renderer and Vitest, then verify that the reproduction passes while preserving the intended class-instance prop behavior.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, three.js, 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