vitest-dev / vitest-dev/vitest

object constructor equality checking not working with react three test renderer

Open
#4,207 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

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

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

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.