This epic is intended to be single source of truth for tracking our progress on making unit tests compatible with Vue.js 3 [Our progress so far](https://gitlab-org.gitlab.io/frontend/playground/jest-speed-reporter/vue3.html). See the child items below for the kinds of problems discovered so far, and how we've solved them. [How to run specs in vue=3 mode](https://docs.gitlab.com/ee/development/testing_guide/testing_vue3.html#running-unit-tests-using-vue-3): TL;DR: ```bash VUE_VERSION=3 yarn jest #[file-path] ``` ## Tips for debugging specs <details> <summary>Click to expand</summary> Identifying the root cause of a failing spec can be tricky, as different parts of our stack can throw errors on top of errors, burying the real problem. Try these one at a time! ### Don't throw on `console` calls Globally disable `console` calls from failing the specs. This should allow the specs to get further in execution, and might point the way to a fix. You can also target the specific `console` message with a regular expression in the `ignores` list, if needed. ```diff diff --git c/spec/frontend/environment.js i/spec/frontend/environment.js index e28fe2f73437..c9b8bff99061 100644 --- c/spec/frontend/environment.js +++ i/spec/frontend/environment.js @@ -32,7 +32,7 @@ class CustomEnvironment extends TestEnvironment { ], // TODO: Remove this and replace with localized calls to `useConsoleWatcherThrowsImmediately` // https://gitlab.com/gitlab-org/gitlab/-/issues/396779#note_1788506238 - shouldThrowImmediately: true, + shouldThrowImmediately: false, }); const { IS_EE } = projectConfig.testEnvironmentOptions; diff --git c/spec/frontend/test_setup.js i/spec/frontend/test_setup.js index d102c2b5f20b..b1b677aaf39b 100644 --- c/spec/frontend/test_setup.js +++ i/spec/frontend/test_setup.js @@ -22,14 +22,14 @@ afterEach(() => }), ); -afterEach(() => { - const consoleCalls = getConsoleCalls(); - forgetConsoleCalls(); - - if (consoleCalls.length) { - throwErrorFromCalls(consoleCalls); - } -}); +// afterEach(() => { +// const consoleCalls = getConsoleCalls(); +// forgetConsoleCalls(); +// +// if (consoleCalls.length) { +// throwErrorFromCalls(consoleCalls); +// } +// }); afterEach(async () => { const dbs = await indexedDB.databases(); ``` ### Don't try to flush promises in global `afterEach` ```diff diff --git i/spec/frontend/test_setup.js w/spec/frontend/test_setup.js index d102c2b5f20b..8fdc06d34475 100644 --- i/spec/frontend/test_setup.js +++ w/spec/frontend/test_setup.js @@ -13,14 +13,14 @@ Dexie.dependencies.IDBKeyRange = IDBKeyRange; process.env.PDF_JS_WORKER_PUBLIC_PATH = 'mock/path/v4/pdf.worker.js'; -afterEach(() => - // give Promises a bit more time so they fail the right test - // eslint-disable-next-line no-restricted-syntax - new Promise(setImmediate).then(() => { - // wait for pending setTimeout()s - jest.runOnlyPendingTimers(); - }), -); +// afterEach(() => +// // give Promises a bit more time so they fail the right test +// // eslint-disable-next-line no-restricted-syntax +// new Promise(setImmediate).then(() => { +// // wait for pending setTimeout()s +// jest.runOnlyPendingTimers(); +// }), +// ); afterEach(() => { const consoleCalls = getConsoleCalls(); ``` ### Look for undeclared instance properties Vue 3 is stricter about references to undefined instance properties. Detect them by enabling the `vue/no-undef-properties` rule. Many findings are duplicates of the [`@gitlab/vue-no-undef-apollo-properties`](https://gitlab.com/gitlab-org/frontend/eslint-plugin/-/blob/449617a50c9cc6b1ea1e8caa11583c2560be3bcb/docs/rules/vue-no-undef-apollo-properties.md) rule, which _may_ be the cause of the problem, but not always. **Note**: this rule produces lots of false positives, e.g., due to mixins, plugins, deep properties in data structures (e.g., `foo: {}` is defined in `data`, but there are references to `foo.bar`). Don't try to fix everything found by this. ```diff diff --git a/.eslintrc.yml b/.eslintrc.yml index 4ba890e3df4e..7873f1f9d2c6 100644 --- a/.eslintrc.yml +++ b/.eslintrc.yml @@ -180,6 +180,21 @@ rules: - '^router-link$' - '^router-view$' - '^gl-emoji$' + vue/no-undef-properties: + - error + - ignores: + - '__' + - 's__' + - 'n__' + - 'sprintf' + - 'track' + - 'trackEvent' + - 'glFeatures' + - '$apollo' + - '$route' + - '$router' + - '$store' + - '$toast' local-rules/require-valid-help-page-path: 'error' local-rules/vue-require-valid-help-page-link-component: 'error' overrides: ``` Run `eslint` on files you're investigating. You might need to consider transitive Vue SFCs as well as the main one the spec you're looking at is for. ``` yarn lint:eslint <your Vue file(s)> ``` </details>