reactjs - 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）添加一个类然后使用 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;
    `);
  });