vuejs / vue-jest

Jest Vue transformer
MIT License
746 stars 157 forks source link

Tests fails after updating to new Version 27.x #449

Closed designbydc closed 2 years ago

designbydc commented 2 years ago

I get some test errors after updating @vue/vue3-jest to 27.x. Before with vue-jest ^5.0.0-0 all tests runs without problems. After update it seems that the mock functions outside the test functions has no effect anymore with some expect matchers e.g. toBeCalledWith or toBeCalledTimes.

Code Snippet

...
const mockFunction = jest.fn((v) => {window.console.log('mockFunction'), v})
let data1 = []
let data2 = 0

Object.defineProperty(store.data, 'data2', {
    get: jest.fn(() => data2),
    set: mockFunction
})

test('if data get reset when checkbox unselected', async () => {
        data1 = []
        data2 = 1
        const wrapper: any = mount(DetailsComponent, {
            global: {
                mocks: {$t},
                directives: {validate: jest.fn(), lazyload: jest.fn()}
            }
        })
        await wrapper.find('#select-btn + label').trigger('click')
        expect(mockFunction).toHaveBeenCalledTimes(1)
    }) 

Error log

Error: expect(jest.fn()).toHaveBeenCalledTimes(expected)

Expected number of calls: 1
Received number of calls: 0

package.json

...
"@types/jest": "^27.0.0",
"@vue/cli-plugin-unit-jest": "^5.0.0-0",
"@vue/cli-service": "^5.0.0-0",
"@vue/test-utils": "^2.0.0-0",
"@vue/vue3-jest": "^27.0.0-0",
"babel-core": "^7.0.0-bridge.0",
"babel-jest": "^27.0.0",
"jest-junit": "^13.0.0",
"ts-jest": "^27.0.0",
...

jest.config.js

module.exports = {
    preset: '@vue/cli-plugin-unit-jest/presets/typescript-and-babel',
    transform: {
        '^.+\\.vue$': '@vue/vue3-jest',
    }
}

I didn't find any solutions in docs and issues. Has someone an idea why the tests fails after update?

dominik-bln commented 2 years ago

We were seeing a similar issue for trigger('focus') after updating to Jest v27.

For us the fix described in https://github.com/vuejs/vue-test-utils/issues/1932 helped, i. e. element.dispatchEvent(new Event('click')) instead of element.trigger('click') could help in your case.

designbydc commented 2 years ago

For me the implementation in https://github.com/vuejs/test-utils/issues/456 has fixed the "click" problem!