|
| 1 | +# DEPRECATED |
| 2 | + |
| 3 | +`jest-serializer-vue-tjw` is now deprecated. |
| 4 | + |
| 5 | + |
| 6 | +## Upgrade to [vue3-snapshot-serializer](https://thejaredwilcurt.com/vue-snapshot-serializer/#api) |
| 7 | + |
| 8 | +**If you are still on Vue 2, then you will not be able to use the new library** (it has code unique to the Vue 3 Virtual DOM). |
| 9 | + |
| 10 | +The new library **has all the same features**, and comes with several new features as well: |
| 11 | + |
| 12 | + | `jest-serializer-vue-tjw` | `vue3-snapshot-serializer` |
| 13 | +--: | :-- | :-- |
| 14 | +First release | 2020-01-12 | 2024-09-06 |
| 15 | +Made by | TheJaredWilcurt | TheJaredWilcurt |
| 16 | +Vue Support | Vue 2 and 3 (somewhat) | Vue 3 |
| 17 | +Test Runners | Jest and Vitest (mostly) | Vitest and Jest |
| 18 | +Test Utils | Vue-Test-Utils | Vue-Test-Utils and @Testing-Library/Vue |
| 19 | +Module type | CJS (require) | ESM (import) |
| 20 | +Settings stored in | `vue.config.js` or `package.json` | The `global` or `globalThis` object |
| 21 | +Per-test settings | Posisble, but very difficult | Very easy |
| 22 | +Formatting | Limited options | Very detailed controls |
| 23 | +Stubbing out elements | ❌ | ✅ *new feature* |
| 24 | +`postProcessor` | ❌ | ✅ *new feature* |
| 25 | +`addInputValues` | Experimental (can crash) | ✅ |
| 26 | +`stringifyObjects` | Experimental (can crash) | ✅ |
| 27 | +`attributesToClear` | ✅ | ✅ |
| 28 | +`clearInlineFunctions` | ✅ | ✅ |
| 29 | +`removeClassTest` | ✅ | ✅ |
| 30 | +`removeComments` | ✅ | ✅ |
| 31 | +`removeDataTest` | ✅ | ✅ |
| 32 | +`removeDataTestid` | ✅ | ✅ |
| 33 | +`removeDataTestId` | ✅ | ✅ |
| 34 | +`removeDataQa` | ✅ | ✅ |
| 35 | +`removeDataCy` | ✅ | ✅ |
| 36 | +`removeDataVId` | ✅ | ✅ |
| 37 | +`removeIdTest` | ✅ | ✅ |
| 38 | +`removeIstanbulComments` | ✅ | Removed (problem no longer exists) |
| 39 | +`removeServerRendered` | ✅ | ✅ |
| 40 | +`sortAttributes` | ✅ | ✅ |
| 41 | +`sortClasses` | ❌ | ✅ *new feature* |
| 42 | +`verbose` | ✅ | ✅ |
| 43 | +`debug` | ❌ | ✅ *new feature* |
| 44 | + |
| 45 | + |
| 46 | +For **new projects**, you can just follow the "[Getting Started](https://TheJaredWilcurt.com/vue-snapshot-serializer)" guide on the docs site of the new library. |
| 47 | + |
| 48 | +For **existing projects** follow the migration notes below. |
| 49 | + |
| 50 | + |
| 51 | +## **Migrating** from *jest-serializer-vue-tjw* to *vue3-snapshot-serializer* |
| 52 | + |
| 53 | +If you have a Vue 2 codebase you are transitioning to Vue 3, then `jest-serializer-vue-tjw` will still work with Vue 3. So stick with it until your conversion to Vue 3 is done. Once completely over to Vue 3 (or if you have a codebase that was always Vue 3), then you can can migrate to `vue3-snapshot-serializer`. |
| 54 | + |
| 55 | +1. Remove the old library |
| 56 | + * `npm uninstall jest-serializer-vue-tjw` |
| 57 | + * Delete any old code you have related to the old library (search for `jestSerializer` and `jest-serializer`) |
| 58 | +1. Add the new library |
| 59 | + * `npm install --save-dev vue3-snapshot-serializer` |
| 60 | +1. In your Vitest or Jest config, replace the snapshot serializer: |
| 61 | + ```diff |
| 62 | + "snapshotSerializers": [ |
| 63 | + - "<rootDir>/node_modules/jest-serializer-vue-tjw" |
| 64 | + + "./node_modules/vue3-snapshot-serializer/index.js" |
| 65 | + ] |
| 66 | + ``` |
| 67 | +1. The new library uses the "diffable" formatter by default, this will give you very different snapshots. So to make the transition smoother, we also offer the "classic" formatter, which is the same one used by `jest-serializer-vue-tjw`. |
| 68 | + * In your [Vitest](https://vitest.dev/config/#setupfiles)/[Jest](https://jestjs.io/docs/configuration#setupfilesafterenv-array) `setup.js` file add the following to your global `beforeEach`: |
| 69 | + ```js |
| 70 | + global.beforeEach(() => { |
| 71 | + // Set the default settings for each snapshot |
| 72 | + global.vueSnapshots = { |
| 73 | + formatter: 'classic', |
| 74 | + classicFormatting: { |
| 75 | + // Pass in js-beautify.html settings here. |
| 76 | + // The defaults for this match the defaults for jest-serializer-vue-tjw. |
| 77 | + } |
| 78 | + }; |
| 79 | + }); |
| 80 | + ``` |
| 81 | + * The API for `classicFormatting` is the same as the `formatting` options for `jest-serializer-vue-tjw`. Full details are [documented here](https://github.com/tjw-lint/vue3-snapshot-serializer/blob/main/types.js#L19). |
| 82 | + * There may still be some minor tweaks when going to the new library, but this is as close as you'll get to replicating the snapshots. |
| 83 | +1. Once migrated over, you can try removing the `formatter` and `classicFormatting` settings to use the new formatter which is much more customizable. This will require updating your snapshots again, expect major formatting changes to occur. Consult the new [docs site](https://TheJaredWilcurt.com/vue-snapshot-serializer) for details on customzing snapshots. |
| 84 | + ```js |
| 85 | + global.beforeEach(() => { |
| 86 | + // Set the default settings for each snapshot |
| 87 | + global.vueSnapshots = { |
| 88 | + formatting: {} |
| 89 | + }; |
| 90 | + }); |
| 91 | + ``` |
| 92 | +
|
| 93 | +
|
| 94 | +* * * |
| 95 | +
|
| 96 | +
|
| 97 | +# Old Documentation |
| 98 | +
|
| 99 | +Everything below this point is the original documentation for this library. |
| 100 | +
|
| 101 | +
|
| 102 | +* * * |
| 103 | +
|
| 104 | +
|
1 | 105 | # jest-serializer-vue-tjw |
2 | 106 |
|
3 | 107 | [](https://github.com/tjw-lint/jest-serializer-vue-tjw/actions/workflows/node.js.yml) [](https://github.com/tjw-lint/jest-serializer-vue-tjw/actions/workflows/node.js.yml) [](https://github.com/tjw-lint) [](/package.json) [](/CODE_OF_CONDUCT.md) [](/LICENSE) |
|
0 commit comments