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?

That's a strange error - Typescript is telling you that there's a type mismatch between the argument you are passing in and the `MatcherOptions` type. But as far as I can see there is nothing wrong with what you have here. — Marcus, Oct 18 '21 at 10:33

score 0 · Accepted Answer · answered Dec 10 '21 at 12:27

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;
    `);
  });

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

1 Answers1