Problems with jest and Vuetify regarding aria-owns id in snapshot

Jejja 0
Viewed 27

Im having problem with jest-test with vuetify. If Im running a testcase by it own I get one value for aria-owns. Example:

<div role="button" aria-haspopup="listbox" aria-expanded="false" aria-owns="list-8" class="v-input__slot">

Im using webstorm so I just update the snapshot directly. BUT when Im running all testcases with npm run test. The testcase received this HTML instead:

<div role="button" aria-haspopup="listbox" aria-expanded="false" aria-owns="list-27" class="v-input__slot">

As you see the id for the aria-owns has been changed. And I dont know how to fix this. I tried several clear and reset methods for jest, for example: jest.clearAllMocks() and jest.resetModules(), and so on but nothing works.

Please help.

vuetify.js jestjs
1 Answers

Vuetify 2 uses this._uid which is internal to vue and can't be reset. It is incremented for each component instance which is why you get a different value if you run a different number of tests.

Vuetify 3 has a custom getUid function which also increments but can be imported and reset before each test:

import { getUid } from 'vuetify/lib/util'

beforeEach(() => {
  getUid.reset()
})
Kael Watts-Deuchar0
Related