Реагировать на тестирование библиотеки toHaveStyle для css листа (ButtonFace)

Question

У меня есть стили, примененные к кнопке через лист CSS. Когда приложение запускается, кнопка имеет только класс .Button. При нажатии кнопки добавляется дополнительный класс .clicked, который затем изменяет стиль кнопки. Текст кнопки также меняется с «кнопка» на «кнопка нажата».

Я бы хотел, чтобы RTL искал эти изменения стиля (которые отчетливо видны при запуске приложения).

button.css:

.Button {
    background-color: blueviolet;
}

.clicked {
    transform: scale(8.0);
    background-color: red;
}

тестовый код:

import React from 'react';
import { cleanup, render, fireEvent } from '@testing-library/react';
import '@testing-library/jest-dom/extend-expect';
import App from './App';


describe('clicking on the button', () => {

  afterAll(cleanup);

  let upDatedButton: HTMLElement;

  beforeAll(async () => {
    const { getByText, findByText } = render(<App />);
    const button = getByText('button');

    fireEvent(
      button,
      new MouseEvent('click', {
        bubbles: true,
        cancelable: true
      })
    )

    upDatedButton = await findByText('button clicked');
  });

  // the button has been click: it's text is now different
  it('button text changes', async () => {
    expect(upDatedButton).toBeInTheDocument();
    expect(upDatedButton).toBeInstanceOf(HTMLButtonElement);
  });

  it('style changes after click', async () => {
    expect(upDatedButton).toHaveClass('Button clicked');  //clicked class is picked up

    // fails here: only style is background-color: ButtonFace
    expect(upDatedButton).toHaveStyle(`
      transform: scale(8.0);
      background-color: red;
    `);
  });

});

toHaveStyle() не подбирает эти новые стили, а скорее что-то совершенно другое, цвет фона "ButtonFace":

expect(element).toHaveStyle()

- Expected

- background-color: red;
- transform: scale(8.0);
+ background-color: ButtonFace;

Как мнепроверить стили, которые должен видеть пользователь? Ура!