Support Vue component testing in QUnit
Open, Needs TriagePublic
Actions

Assigned To

None

Authored By

	• mszabo
	May 3 2025, 6:25 PM

Description

It is often desirable to integration test Vue components in isolation. The Vue community has settled for vue-test-utils (hereinafter: VTU) as a convenient wrapper for the repetitive creation of app wrappers for such testing. Thus far, we've been using Jest for such tests, which has served us well, but can have issues in some cases:

Jest runs tests in jsdom rather than an actual browser. This can occasionally lead to problems with certain components, e.g. at the time of writing, the Popover component in Codex cannot be integration tested in Jest + jsdom due to a dependency crashing with infinite recursion.
Jest is unable to load ResourceLoader modules (T390639).

It would be good to have the opportunity to test Vue components using the existing QUnit-based test runner in addition to Jest.

Details

Related Changes in Gerrit:

	Subject	Repo	Branch	Lines +/-
	PoC: Add an example Vue component test in QUnit	mediawiki/extensions/CheckUser	master	+83 -2
	Support Vue component testing in QUnit	mediawiki/core	master	+15 K -1

Customize query in gerrit

Related Objects

Mentioned In: T391688: [Session] 🥳 Wikimedia Hackathon 2025 Project Showcase / Closing Session
Mentioned Here: T212521: RFC: Reconsider how we run QUnit unit tests
T390639: Allow Jest to load ResourceLoader modules

Event Timeline

• mszabo created this task.May 3 2025, 6:25 PM

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptMay 3 2025, 6:25 PM

Change #1141138 had a related patch set uploaded (by Máté Szabó; author: Máté Szabó):

[mediawiki/core@master] Support Vue component testing in QUnit

https://gerrit.wikimedia.org/r/1141138

gerritbot added a project: Patch-For-Review.May 3 2025, 6:26 PM

• mszabo added a project: Wikimedia-Hackathon-2025.May 3 2025, 6:28 PM

• mszabo added a project: Vue.js.

Change #1141480 had a related patch set uploaded (by Máté Szabó; author: Máté Szabó):

[mediawiki/extensions/CheckUser@master] PoC: Add an example Vue component test in QUnit

https://gerrit.wikimedia.org/r/1141480

• mszabo updated the task description. (Show Details)May 4 2025, 11:05 AM

• mszabo moved this task from Backlog to Hacking projects on the Wikimedia-Hackathon-2025 board.May 4 2025, 12:44 PM

• mszabo moved this task from Inbox to QUnit on the MediaWiki-Core-Tests board.May 4 2025, 12:51 PM

The two issues you raise actually seem like positives to me. Generally I would be worried about encouraging the writing of tests in two different libraries and the fragment it leads to. To be truly honest I would love on the long term for us to move fully away from QUnit to Jest in core and that is at least what I am seeing in new extensions. Jest has various benefits such as quicker execution and code coverage scores/enforcement.

testing inside a real browser tends to be slow and I think is better suited for integration tests such as Selenium and Pixel
The inability to load ResourceLoader encourages the writing of better unit tests scoped to the functionality of the module being tested.

In T393284#10798070, @Jdlrobson wrote:

The two issues you raise actually seem like positives to me. Generally I would be worried about encouraging the writing of tests in two different libraries and the fragment it leads to. To be truly honest I would love on the long term for us to move fully away from QUnit to Jest in core and that is at least what I am seeing in new extensions. Jest has various benefits such as quicker execution and code coverage scores/enforcement.

testing inside a real browser tends to be slow and I think is better suited for integration tests such as Selenium and Pixel

The inability to load ResourceLoader encourages the writing of better unit tests scoped to the functionality of the module being tested.

Yeah, I've read the relevant discussion at T212521 and related tasks and have been meaning to avoid restarting it :) Just to clarify, I'm not trying to advocate that QUnit be used over or in place of Jest here, I just think improved support for component testing via QUnit would be a neat option to have for teams that have a need to run JavaScript tests in a non-jsdom browser environment, be it because of jsdom bugs, application logic that makes extensive use of more complex browser APIs (like VE) or a preference for integration-level tests.

• debt mentioned this in T391688: [Session] 🥳 Wikimedia Hackathon 2025 Project Showcase / Closing Session.May 7 2025, 11:53 AM

Change #1141138 merged by jenkins-bot:

[mediawiki/core@master] Support Vue component testing in QUnit

https://gerrit.wikimedia.org/r/1141138

ReleaseTaggerBot added a project: MW-1.45-notes (1.45.0-wmf.2; 2025-05-20).May 13 2025, 10:00 PM

Change #1141480 abandoned by Dreamy Jazz:

[mediawiki/extensions/CheckUser@master] PoC: Add an example Vue component test in QUnit

Reason:

Probably don't need to keep the PoC around

https://gerrit.wikimedia.org/r/1141480

Maintenance_bot removed a project: Patch-For-Review.Nov 12 2025, 2:31 PM