Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

@vitest/pretty-format is not compatible with React 19 snapshots #6908

Closed
6 tasks done
hi-ogawa opened this issue Nov 15, 2024 · 0 comments · Fixed by #6909
Closed
6 tasks done

@vitest/pretty-format is not compatible with React 19 snapshots #6908

hi-ogawa opened this issue Nov 15, 2024 · 0 comments · Fixed by #6909

Comments

@hi-ogawa
Copy link
Contributor

hi-ogawa commented Nov 15, 2024

Describe the bug

Since v2.0.2 and this PR #6077, Vitest uses @vitest/pretty-format which bundles react-is from React 18, but this doesn't support formatting React 19's element.

Previously it was possible to overrides react-is to pin React 19 version like other React deps react, react-dom, and react-server-dom-webpack and it's common to do so.

Not sure what would be the solution. We can try bundling react-is both from 18 and 19 and switch during runtime?

Reproduction

I found the issue on my repo hi-ogawa/vite-plugins#660, which is using pnpm override like this https://github.com/hi-ogawa/vite-plugins/blob/ca3f97ec09c2549d98779acbf9a24e97706c125d/package.json#L43-L46

Stackblitz repro

On latest Vitest https://stackblitz.com/edit/vitest-dev-vitest-a6zqtz?file=test%2Frepro.test.tsx

// repro.test.tsx
import { expect, test } from 'vitest';

test('repro', () => {
  expect(<div>hello</div>).toMatchInlineSnapshot(`
    {
      "$$typeof": Symbol(react.transitional.element),
      "_owner": null,
      "_store": {},
      "key": null,
      "props": {
        "children": "hello",
      },
      "type": "div",
    }
  `);
});

On Vitest v2.0.1 https://stackblitz.com/edit/vitest-dev-vitest-rrglpy?file=test%2Frepro.test.tsx

test('repro', () => {
  expect(<div>hello</div>).toMatchInlineSnapshot(`
    <div>
      hello
    </div>
  `);
});

System Info

(stackblitz)

  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.20.3 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 10.2.3 - /usr/local/bin/npm
    pnpm: 8.15.6 - /usr/local/bin/pnpm
  npmPackages:
    vitest: 2.1.5 => 2.1.5

Used Package Manager

npm

Validations

@github-actions github-actions bot locked and limited conversation to collaborators Dec 4, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

Successfully merging a pull request may close this issue.

1 participant