vitest-dev / vitest-dev/vitest

Error when using @vue/compat.

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

When using the build @vue/compat and installing it according to the migration guide (ie: using alias in vite), the tests fail with the following message:

TypeError: Cannot read properties of null (reading 'isCE')

This happens when you try to render a component with a slot.

Looking around, I have found this is a very similar issue than: https://github.com/vitest-dev/vitest/issues/1886. Following the instructions here, I have managed to add @vue/test-utils to the inlined dependencies (as you can see in the reproduction).

The issue happens whenever adding @testing-library/vue. The tests using testing-library now also fail due to the same reason. At this point I have tried multiple combinations of inlining dependencies without much luck.

If I manually edit the node_modules/@vue/test-utils/dist/vue-test-utils.cjs.js file and change the vue import to @vue/compat, both of the tests work.

I suspect the solution might be simpler and would also happily contribute in case its needed.

Thank you!

Reproduction

https://github.com/bernardocorbella/vue-compat-vite-slot-error

You can see the test file in which one test passes and one fails.

System Info
System:
    OS: macOS 14.1.1
    CPU: (8) arm64 Apple M1
    Memory: 75.09 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.18.2 - ~/.volta/tools/image/node/18.18.2/bin/node
    Yarn: 1.22.19 - ~/.volta/tools/image/yarn/1.22.19/bin/yarn
    npm: 9.4.0 - ~/.volta/tools/image/npm/9.4.0/bin/npm
    pnpm: 8.11.0 - ~/.volta/bin/pnpm
  Browsers:
    Chrome: 119.0.6045.159
    Safari: 17.1
  npmPackages:
    @vitejs/plugin-vue: ^4.4.0 => 4.5.0 
    vite: ^4.4.11 => 4.5.0 
    vitest: ^0.34.6 => 0.34.6
Used Package Manager

pnpm

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

Start with the linked reproduction and its src/components/tests/HelloWorld.spec.ts test file, then run the failing slot test with the reported @vue/compat, Vite, Vitest, and testing-library setup. Compare the passing and failing cases while checking dependency inlining and the import behavior described in the issue; done means both tests pass without manually editing node_modules.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript, vite
Domain
testing, tooling
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.