Skip to content

Improved Jest-Serializer #5418

Open
Open
@TheJaredWilcurt

Description

@TheJaredWilcurt

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:

  • 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:
    • Better formatting example
  • 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:

Change the jest config from jest-serializer-vue to jest-serializer-vue-tjw:

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions