Vue and Vuex have now been added to Core as resource modules. Now that we have basic support in place for using the framework, we should think about how we want to write tests for Vue components and plugins.
I'd like to propose that we use Jest to test our Vue code going forward. I know that we already have some other tools in place (QUnit and node-qunit) for testing JS code, but I believe that adding Jest to our pipeline would be useful for the following reasons:
- We are writing single-file components without using Webpack, thanks to @Catrope's updates to ResourceLoader. Jest gives us the ability to test these files in a headless Node.js environment without needing to maintain a test-only build process thanks to the vue-jest library. This allows Jest to handle all transforms of Vue files itself without needing to depend on an additional tool.
- Jest is a "batteries-included" system that brings its own assertions, mocking tools (Sinon isn't necessary when using it), etc.
- Jest plays nicely with Vue's official testing tools, https://vue-test-utils.vuejs.org/
I have a working example of a Jest-based test suite for Vue components (and Vuex actions) here: https://github.com/egardner/mediawiki-extensions-MachineVision. In addition to the libraries themselves, here's what I had to add to get Jest, Vue, and MediaWiki working together:
- Jest Config file specifying what needs to be tested, how to collect coverage reports, what files to transform using vue-jest, and what files to ignore
- Jest setup file that mocks out a MediaWiki JS environment for us in testing. This is similar to what mw-node-qunit does. It may be worth pulling some of this code into a similar shared location.
- A __mocks__ folder in the root project directory where module mocks can be defined (this works well when code requires a RL module that does not have an equivalent NPM package)
- The tests themselves live in tests/jest and can be run with a simple jest command; this has been added to the test:unit package script in package.json
Adding similar scaffolding to MediaWiki core should be straightforward, we'd just need to ensure that tests intended for Jest are not run in node-qunit and vice-versa. @Krinkle @Catrope @Jdforrester-WMF thoughts on this?