I've forked off of the jest-serializer-vue repo and have added many new features and had over a dozen releases since the fork. This is a complete re-write with 100% test code coverage.
Major features:
Customizable settings (all new features can be enabled or disabled in vue.config.js). (shielding people from downstream updates)
All feature requests from the original jest-serializer-vue have been implemented (and more).
Much better default formatting, which is now completely customizable. Example of better formatting:
Can optionally remove from snapshots (enabled by default):
data-server-rendered="true" - good for Nuxt apps
data-test="whatever" - Commonly used way of targeting elements in your tests. (Used in the Vue-Test-Utils-Next documentation)
data-testid="whatever" - Common way of targeting a unique element
data-test-id="whatever"
data-v-1234abcd="" - This one feature is the entire reason I started working on this project. It is a life saver when updating 3rd party components like Vue-Good-Table or Vue-Select that use scoped styles. Each new release has different data-v-ID's and breaks all snapshots that mount these components. Removing the data-v-id's from the snapshots fixes this pain.
Can optionally remove from snapshots (disabled by default):
All html comments <!-- whatever -->
data-qa="whatever"
id="testWhatever"
class="test-whatever"
Has an experimental feature to display JSON data stored in HTML attributes. Example:
This <router-link to="[object Object]">
becomes <router-link to="{ name: 'UserList' }">
Each setting can be changed on a per-test basis as well
A migration guide is provided to help as people transition from jest-serializer-vue v2 to jest-serializer-vue-tjw v3.
What does the proposed API look like?
Change the dependency from jest-serializer-vue to jest-serializer-vue-tjw:
What problem does this feature solve?
I've forked off of the
jest-serializer-vue
repo and have added many new features and had over a dozen releases since the fork. This is a complete re-write with 100% test code coverage.Major features:
vue.config.js
). (shielding people from downstream updates)jest-serializer-vue
have been implemented (and more).data-server-rendered="true"
- good for Nuxt appsdata-test="whatever"
- Commonly used way of targeting elements in your tests. (Used in the Vue-Test-Utils-Next documentation)data-testid="whatever"
- Common way of targeting a unique elementdata-test-id="whatever"
data-v-1234abcd=""
- This one feature is the entire reason I started working on this project. It is a life saver when updating 3rd party components like Vue-Good-Table or Vue-Select that use scoped styles. Each new release has different data-v-ID's and breaks all snapshots that mount these components. Removing the data-v-id's from the snapshots fixes this pain.<!-- whatever -->
data-qa="whatever"
id="testWhatever"
class="test-whatever"
<router-link to="[object Object]">
<router-link to="{ name: 'UserList' }">
jest-serializer-vue
v2 tojest-serializer-vue-tjw
v3.What does the proposed API look like?
Change the dependency from
jest-serializer-vue
tojest-serializer-vue-tjw
:Change the jest config from
jest-serializer-vue
tojest-serializer-vue-tjw
: