Skip to content

isVisible() not seeing display: none using vitest with jsdom #2073

Open
@BJSS-russell-pollock

Description

@BJSS-russell-pollock

Subject of the issue

@vue/test-utils: 2.3.2
jsdom: 22.0.0
vitest: 0.31.0

Using vue3, vue-test-utils and vitest with jsdom - our tests are failing on isVisible().toBeFalsy()

The documentation says the display: none is one method used to identify isVisible()
https://v1.test-utils.vuejs.org/api/wrapper/isvisible.html

The tests were passing using Jest

Steps to reproduce

Mount wrapper

Element when shown
<div class="accordionRow" style="">

await wrapper.find('.accordionHead').trigger('click')
expect(wrapper.find('.accordionRow').isVisible()).toBeTruthy()
Test Passes

Element when hidden
<div class="accordionRow" style="display: none;">

await wrapper.find('.accordionHead').trigger('click')
expect(wrapper.find('.accordionRow').isVisible()).toBeFalsy()
Test Fails

Using

expect(wrapper.find('.accordionRow').attributes('style')).toBe('display: none;')
Test Passes

Expected behaviour

Test should pass when the attribute style is display: none; and .isVisible().toBeFalsy() is used for the assertion

Actual behaviour

Test fails because the assertion is not seeing display: none;

Possible Solution

expect(wrapper.find('.accordionRow').attributes('style')).toBe('display: none;')

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions