Get computed style in Jest Test

Question

I have the following code.

Html template

<template>
    <tr class="table__row" aria-hidden={isHidden} data-test-class="table-row">
        <td>Cell</td>
    </tr>
</template>

CSS

.table__row[aria-hidden="true"] {
    display: none;
}

JS Controller

import { LightningElement } from 'lwc';

export default class Example extends LightningElement {
    isHidden = true;
}

Jest

import { createElement } from 'lwc';
import Example from 'c/example'

// eslint-disable-next-line no-undef
const flushPromises = () => new Promise(resolve => setImmediate(resolve));

describe('starnger things', () => {
    it('expects to get display:none', async () => {
        const componentElement = createElement('c-example',{ is: Example });

        document.body.appendChild(componentElement);
        await flushPromises();

        const row = componentElement.shadowRoot.querySelector('[data-test-class="table-row"]');
        const styles = getComputedStyle(row);
        expect(row.ariaHidden).toBe('true')
        expect(row.classList.contains('table__row')).toBe(true)
        // next line fails with 'Received: "table-row"'
        expect(styles.display).toBe('none');
    });
});

I want to test the style change with Jest, but getComputedStyle for the table row returns display: table-row. Am I missing something? Or is it just impossible?

Update

I updated the code to make sure it's working and the issue is easily reproducible with the provided code.

I want to test specifically the display: none and not how it is achieved in order to segregate the behavior and the implementation.

Answer 1

This kind of test is possible but there are several issues with your test code:

1. Add the component to the DOM

First of all, your test code doesn't add the component to the DOM. This is required for rendering the right properties in the dynamic template.

You need to add that after creating the the element:

document.body.appendChild(componentElement);

2. Use the right property/selector

Then, you use an unsupported custom test-data-class attribute on the tr standard tag. This is not valid HTML and it's not needed as you can retrieve the element in your test by simply using the CSS class selector in querySelector:

const row = componentElement.shadowRoot.querySelector('.table__row');

You could also retrieve the tr element if there's only one in your template:

const row = componentElement.shadowRoot.querySelector('tr');

3. Reconsider what you need to test

Finally, while it will work, your test should not check if a static CSS rule is correctly applied using getComputedStyle because of separation of concern. In other words, you shouldn't be testing if the CSS engine does it work correctly, you should be testing if your component's JS/template dynamically renders as expected.

This means that you only need to check the value of aria-hidden. That's good enough for a proper test coverage:

const componentElement = createElement('c-my-cmp',{ is: MyCmp });
document.body.appendChild(componentElement);
const row = componentElement.shadowRoot.querySelector('tr[aria-hidden="true"]');
expect(row).not.toBeNull();