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

Open
6 tasks done
hi-ogawa opened this issue Nov 15, 2024 · 0 comments · May be fixed by #6909
Open
6 tasks done

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

hi-ogawa opened this issue Nov 15, 2024 · 0 comments · May be 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

@hi-ogawa hi-ogawa linked a pull request Nov 15, 2024 that will close this issue
6 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

1 participant