Jest-dom 如何通过id检查组件是否有样式

Question

我正在尝试检查此 ModalVideo 组件在打开时是否应用了某些样式（prop isOpen={true}），如下所示：

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

但是 IDE 触发了这个警告：

也试过字符串：

知道如何实现吗？

Answer 1

我通过向容器 (.modal) 添加 class 然后使用 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 如何通过id检查组件是否有样式

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

reactjs

jestjs

jest-dom