vitest
vitest copied to clipboard
Bug: Running tests with both script setup and script error
Describe the bug
I recently posted the same issue https://github.com/vuejs/test-utils/issues/1617 , but they believe it's a vitest issue, and probably is. Simply put, an import declared inside of script setup causes tests to fail when attempted to be accessed in regular script. As the other member had mentioned in the other github issue, it causes an issue with webpack but not vite. I assume this is a feature that it works fine for Vite, and should work fine with Vitest as well.
Reproduction
https://stackblitz.com/edit/vitejs-vite-suaivh?file=src/components/HelloWorld.vue
Create a component Create
System Info
System:
OS: Windows 10 10.0.22000
CPU: (12) x64 AMD Ryzen 5 3600X 6-Core Processor
Memory: 9.06 GB / 15.93 GB
Binaries:
Node: 16.14.2 - C:\Program Files\nodejs\node.EXE
Yarn: 1.22.15 - C:\Program Files\nodejs\yarn.CMD
npm: 8.11.0 - C:\Program Files\nodejs\npm.CMD
Browsers:
Edge: Spartan (44.22000.120.0), Chromium (98.0.1108.43)
Internet Explorer: 11.0.22000.120
Used Package Manager
npm
Validations
- [X] Follow our Code of Conduct
- [X] Read the Contributing Guidelines.
- [X] Read the docs.
- [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
- [X] Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
- [X] The provided reproduction is a minimal reproducible example of the bug.
I don't want to point you to another project, but I will 😄
Vitest doesn't process files, Vite does. Vitest only runs it. Please, open an issue in Vite repo. Issue is with how Vite processes SSR transforms: https://stackblitz.com/edit/vitejs-vite-kp6pw1?file=transform.mjs
For web:
import { defineComponent as _defineComponent } from "/node_modules/vue/dist/vue.runtime.esm-bundler.js";
const __default__ = defineComponent({});
import { defineComponent } from "/node_modules/vue/dist/vue.runtime.esm-bundler.js";
When processed with SSR transformer:
const __vite_ssr_import_1__ = await __vite_ssr_import__("/node_modules/vue/dist/vue.runtime.esm-bundler.js");
const __default__ = __vite_ssr_import_2__.defineComponent({});
const __vite_ssr_import_2__ = await __vite_ssr_import__("/node_modules/vue/dist/vue.runtime.esm-bundler.js");
__default__
is trying to use the wrong import. You can point Vite team to this repro. (you need to run node transform.mjs
)
Hello,
here comes a superficial description of how this error may look like, and a dangerous temporary workaround until Vite issue 10444 is fixed .
I post this just to help people find the reason for their "failing" tests quicker. This is not any solution to the underlying Vite issue.
Our dependencies: Vite 3.2.4 Vitest 0.25.2
// defining file TermineFactory
export class TermineFactory {
public static create(
// Using file
import { TermineFactory } from './TermineFactory'
// ... later in same file
return TermineFactory.create(
Vitest output:
Test Files 39 passed (39)
Tests 109 passed (109)
Start at 11:42:52
Duration 11.56s (transform 13.62s, setup 3ms, collect 76.10s, tests 3.68s)
⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ Unhandled Errors ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯
Vitest caught 4 unhandled errors during the test run.
This might cause false positive tests. Resolve unhandled errors to make sure your tests are not affected.
⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ Unhandled Rejection ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯
TypeError: Cannot read properties of undefined (reading 'create')
...
47| return TermineFactory.create(
| ^
The error may also have a different look:
// When we reassign the static function to an exported variable in the defining file like this:
export const createTermine = TermineFactory.create
// ... and refactor the usages
return createTermine(
... then the error changes to
Vitest caught 4 unhandled errors during the test run.
This might cause false positive tests. Resolve unhandled errors to make sure your tests are not affected.
⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ Unhandled Rejection ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯
TypeError: createTermine is not a function
...
47| return createTermine(
| ^
Workaround is to use the vitest parameter --dangerouslyIgnoreUnhandledErrors for running our tests. This keeps Vitest exit code 1 for expect-failures, but ignores the type errors and makes our npm test script end with 0 when all expect-statements succeed.
Happy hacking! 🙂
The hoisting was fixed some time ago, so I think this issue can be closed.