Jest-dom how to check if component have styles by id

Question

I'm trying to check if this ModalVideo component have some styles applied when opened (prop isOpen={true}), like so:

import React from 'react';
import { render, cleanup } from '@testing-library/react';
import '@testing-library/jest-dom';
import TestThemeProvider, {
  defaultTheme,
} from '../../../providers/themeProvider/testThemeProvider';

import ModalVideo from '.';

afterEach(cleanup);

describe('ModalVideo', () => {
  

  test('ModalVideo has correct styles when is full screen', () => {    
    const { getByTestId } = render(
      <TestThemeProvider>
        <ModalVideo
          data-testid="modalVideo"
          isOpen={true}
          videoURL={
            'https://player.vimeo.com/external/the-url'
          }
          callToAction={'Play video'}
        ></ModalVideo>
      </TestThemeProvider>
    );

    expect(getByTestId(/modalVideo/i)).toHaveStyle(`        
        position: fixed;
        display: flex;
    `);
  });
});

But the IDE fires this warning:

Also tried as string:

Any idea how can I achieve it?

Answer 1

I solved it by adding a class to the container (.modal) and then using querySelector

test('ModalVideo has correct styles when is full screen', () => {
    const { container } = render(
      <TestThemeProvider>
        <ModalVideo
          data-testid="modalVideo"
          isOpen={true}
          videoURL={
            'https://player.vimeo.com/external/the-url'
          }
          callToAction={'Play video'}
        ></ModalVideo>
      </TestThemeProvider>
    );

    const modal = container.querySelector('.modal');
    expect(modal).toBeVisible();
    expect(modal).toHaveStyle(`
        position: fixed;
        display: flex;
    `);
  });