It's not obvious how to best write unit tests for Vue components that are loaded through MediaWiki. We need to come up with best practices for this and clearly document them.
These best practices could include:
- Use Jest and @vue/test-utils (include sample configs for this); T302831 is a good start for this
- Ensure components are exported with module.exports = exports = { ..., the extra exports is required to make Jest work
- Install Vue and Codex through NPM so that code require()ing them will work in the Jest environment
- LibraryUpgrader will upgrade these to the right versions automatically
- A recommended eslint config that recognizes Jest test files as such
Open questions:
- How should Codex icons be handled? Right now the most common practice is to include an icons.json file in the repository that contains copies of the icons used in the code. This requires manual maintenance, and is also confusing because the file lives in the real source code (not in a test-specific location) and looks like it will be loaded in production, but isn't. Can we do better, for example by configuring Jest to alias require calls for icon.json files to the @wikimedia/codex-icons package, or to a Proxy that returns a dummy value for every property access whose name starts with cdxIcon?
- How should the i18n plugin be mocked? Right now every repository handles this in an ad hoc way. Some only mock $i18n, others also mock the v-i18n-html directive. Can we provide standard mocks for these? How should we distribute them among extensions? Perhaps as an NPM package?