type test css,typescript - open-wc/testing test css property - Stack Overflow

i am trying to test my web components css property:

import {SdkIconButton} from '../';

import {expect, fixture, html} from '@open-wc/testing';

const assert = chai.assert;

suite('sdk-icon-button', () => {

test('css color property', async () =>{

const el = await fixture(html``);

expect(el.firstChild().css('color')).to.eq('red');

});

});

here is the sdk-icon-button:

import {html, customElement, property, css} from 'lit-element';

import {SdkButton} from '../sdk-button';

@customElement('sdk-icon-button')

export class SdkIconButton extends SdkButton {

static styles = css`

.iconBtn {

display: block;

color: red;

}

`;

@property()

icon: string;

constructor() {

super();

this.icon = 'default';

}

public render() {

return html`

`;

}

}

declare global {

interface HTMLElementTagNameMap {

'sdk-icon-button': SdkIconButton;

}

}

But when i try to run the test i get the following error:

src/test/sdk-icon-button_test.ts:34:12 - error TS2721: Cannot invoke

an object which is possibly 'null'.

expect(el.firstChild().css('color')).to.eq('red');

~~~~~~~~~~~~~

src/test/sdk-icon-button_test.ts:34:15 - error TS2349: This expression

is not callable. Type 'ChildNode' has no call signatures.

expect(el.firstChild().css('color')).to.eq('red');

So how can i test css properties?