Description
Feature Description
The other day, we noticed the lack of tests for the Frontend.
While there are thoughts about migrating away (if possible) from Fomantic + jQuery, I looked into what would be needed to run tests against Vue components.
Let me explain…
Testing types
The official documentation highlights three different kinds of tests:
https://vuejs.org/guide/scaling-up/testing.html#testing-types
End-to-end tests are already in the work ( #18442 ).
#18346 is about visual regression testing (so related, but not the same).
So I'm looking into Component Testing before going deeper (because in my experience, Unit Tests aren't worth it in this case).
Testing library
Since this should focus on the DOM, I picked Testing Library (yeah, that's the name of the library) instead of Vue Test Utils (which render headless).
https://testing-library.com/docs/vue-testing-library/intro/
Testing Library focuses on the User Behaviour instead of units (so it's kind of BDD instead of TDD). Look at some examples to see what I mean.
Biggest difference will be the lack of assertions / expectations. Instead, if some element does not behave, the library will throw an error to mark the test as failed.
Now, this project uses Vue2 components. That means, the latest and greatest cannot be used right out of the box.
I stick to Jest here which meant to use https://github.com/vuejs/vue-jest#installation
Now, Jest expects Common JS format instead of ES modules. There are some ways to make it behave:
https://jestjs.io/docs/ecmascript-modules
I went to use a Babel transform (I found on StackOverflow…) because the preset did not lead to any change.
Right now, I can get the Vue component to be loaded into Jest, but it does not appear to be mounted correctly.
I started yesterday, but got interrupted several time. Best to document what I have in mind before I loose it.
Do you have questions? I'm happy to dig into specifics in more detail if you want to learn about something.
Screenshots
No response