Integrate Vitest with Personal Dashboard
Closed, ResolvedPublic3 Estimated Story Points
Actions

Assigned To

Authored By

	Dillon
	Oct 22 2025, 2:52 PM

Description

Since we are working on a brand new project, we have the opportunity to explore some newer libraries and frameworks. Vitest is the recommended testing suite by the maintainers of Vue, and there are quite a few benefits we could have from integrating it into our stack.

The long term goal is to make this a project-agnostic library which other teams working on MediaWiki could add as a plugin and write unit tests similar to how Jest is used now.

Acceptance Criteria:

Vitest is available on GitLab through npm test (https://gitlab.wikimedia.org/repos/modtools/vitest-plugin)
Basic functions and modules are mocked (setup.js)

Related Objects
Search...

Status	Assigned	Task
Open	None	T402632 WE1.3: New moderator homepage
Open	None	T402647 Launch new moderator homepage MVP
Open	None	T403982 Create and deploy Extension:PersonalDashboard
Resolved	Dillon	T407988 Integrate Vitest with Personal Dashboard

Event Timeline

Dillon created this task.Oct 22 2025, 2:52 PM

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptOct 22 2025, 2:52 PM

Dillon moved this task from To be estimated to Kanban on the Moderator-Tools-Team board.Oct 22 2025, 2:52 PM

Dillon edited projects, added Moderator-Tools-Team (Kanban); removed Moderator-Tools-Team.

Dillon added projects: PersonalDashboard, OKR-Work.

Dillon added a subtask: T407992: Vitest Plugin: Parse ResourceLoader modules from extension.json.Oct 22 2025, 6:03 PM

Samwalton9-WMF set the point value for this task to 3.Oct 28 2025, 5:07 PM

Samwalton9-WMF triaged this task as Medium priority.Oct 28 2025, 5:11 PM

Samwalton9-WMF moved this task from Ready to In Progress on the Moderator-Tools-Team (Kanban) board.

Dillon changed the task status from Open to In Progress.Oct 30 2025, 5:12 PM

Dillon updated the task description. (Show Details)

Dillon moved this task from In Progress to Eng review on the Moderator-Tools-Team (Kanban) board.

@Dillon can you link to the repository for review? Thanks!

In T407988#11328799, @Kgraessle wrote:

@Dillon can you link to the repository for review? Thanks!

Done!

Samwalton9-WMF moved this task from Backlog to MVP on the PersonalDashboard board.Nov 3 2025, 10:49 AM

@Dillon
I've been encountering this error when trying to mount an app that imports components via commonjs:

SyntaxError: Unexpected token '<'
 ❯ Module.default._load node_modules/vitest-plugin-mediawiki/setup.js:22:22
     20|  }
     21| 
     22|  return loadInternal.call( this, request, parent, isMain );
       |                      ^
     23| }

I created this repo to demonstrate the problem with the vue example app
https://gitlab.wikimedia.org/jsn/vitest-plugin-test

The only change I made was moving imports from es6 style to commonjs

jsn.sherman mentioned this in T402780: Dashboard module: Review changes.Nov 4 2025, 5:15 PM

Dillon moved this task from Reviewed (waiting for changes) to Done on the Moderator-Tools-Team (Kanban) board.Nov 6 2025, 5:36 PM

@Dillon it looks like this is still popping up?

https://integration.wikimedia.org/ci/job/mediawiki-node20/22608/console

Samwalton9-WMF added a parent task: T403982: Create and deploy Extension:PersonalDashboard.Nov 12 2025, 3:00 PM

jsn.sherman mentioned this in T405745: Add a 'Dashboard' link to Special:Dashboard in personal tools.Nov 12 2025, 3:30 PM

okay, looks like we need a little more mocking:

 FAIL  tests/vitest/ext.personalDashboard.riskyArticleEdits/components/ListCard.test.mjs > mount component
TypeError: mw.Message is not a constructor
 ❯ Proxy.getTag resources/ext.personalDashboard.riskyArticleEdits/components/ListCard.vue:103:16
    101|   getTag: function ( tag ) {
    102|    // eslint-disable-next-line mediawiki/msg-doc
    103|    const msg = new mw.Message( mw.messages, `tag-${ tag }` );
       |                ^
    104|    return msg.exists() ? msg.text() : tag;
    105|   }
 ❯ resources/ext.personalDashboard.riskyArticleEdits/components/ListCard.vue:35:23
 ❯ renderFnWithContext node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:692:13
 ❯ renderSlot node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:3032:53
 ❯ Proxy._sfc_render$h node_modules/@wikimedia/codex/dist/codex.js:7490:11
 ❯ renderComponentRoot node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:6545:16
 ❯ ReactiveEffect.componentUpdateFn [as fn] node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:5345:46
 ❯ ReactiveEffect.run node_modules/@vue/reactivity/dist/reactivity.cjs.js:241:19
 ❯ setupRenderEffect node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:5480:5
 ❯ mountComponent node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:5254:7

In T407988#11340256, @jsn.sherman wrote:
@Dillon
I've been encountering this error when trying to mount an app that imports components via commonjs:
SyntaxError: Unexpected token '<'
 ❯ Module.default._load node_modules/vitest-plugin-mediawiki/setup.js:22:22
     20|  }
     21| 
     22|  return loadInternal.call( this, request, parent, isMain );
       |                      ^
     23| }
I created this repo to demonstrate the problem with the vue example app
https://gitlab.wikimedia.org/jsn/vitest-plugin-test

The only change I made was moving imports from es6 style to commonjs

In T407988#11367854, @jsn.sherman wrote:

okay, looks like we need a little more mocking:

 FAIL  tests/vitest/ext.personalDashboard.riskyArticleEdits/components/ListCard.test.mjs > mount component
TypeError: mw.Message is not a constructor
 ❯ Proxy.getTag resources/ext.personalDashboard.riskyArticleEdits/components/ListCard.vue:103:16
    101|   getTag: function ( tag ) {
    102|    // eslint-disable-next-line mediawiki/msg-doc
    103|    const msg = new mw.Message( mw.messages, `tag-${ tag }` );
       |                ^
    104|    return msg.exists() ? msg.text() : tag;
    105|   }
 ❯ resources/ext.personalDashboard.riskyArticleEdits/components/ListCard.vue:35:23
 ❯ renderFnWithContext node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:692:13
 ❯ renderSlot node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:3032:53
 ❯ Proxy._sfc_render$h node_modules/@wikimedia/codex/dist/codex.js:7490:11
 ❯ renderComponentRoot node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:6545:16
 ❯ ReactiveEffect.componentUpdateFn [as fn] node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:5345:46
 ❯ ReactiveEffect.run node_modules/@vue/reactivity/dist/reactivity.cjs.js:241:19
 ❯ setupRenderEffect node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:5480:5
 ❯ mountComponent node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:5254:7

The above CI issues have since been fixed in the Vitest plugin repo. ✅

Samwalton9-WMF removed a subtask: T407992: Vitest Plugin: Parse ResourceLoader modules from extension.json.Nov 13 2025, 2:40 PM

jsn.sherman closed this task as Resolved.Nov 13 2025, 3:18 PM

Integrate Vitest with Personal DashboardClosed, ResolvedPublic3 Estimated Story PointsActions

Description

Related ObjectsSearch...

Event Timeline

Integrate Vitest with Personal Dashboard
Closed, ResolvedPublic3 Estimated Story Points
Actions

Related Objects
Search...