React 测试库 | toHaveStyle 在点击时更改，测试失败

Question

单元测试，单独的按钮/选项卡以白色/黑色 - 背景/颜色开始，并在单击时翻转为黑色/白色。第一个测试通过，第二个没有。

不知何故，试过 findBy，await waitFor 回调期待，仍然没有快乐。我正在 Udemy 上使用 Jest 和测试库跟踪测试 React，这似乎有效

const props = {
  onClick: jest.fn(),
  label: 'Shuttles',
  name: 'shuttles',
  activeTab: null,
};

it('renders without crashing, inactive state', () => {
  render(<Tab {...props} />);
  const tab = screen.getByRole('button', { name: /shuttles$/i });
  expect(tab).toBeInTheDocument();
  expect(tab).toHaveStyle({ backgroundColor: 'white', color: 'black' });
});

it('sets to active tab (changes the background and text color) on click', () => {
  // TODO fix test
  render(<Tab {...props} />);
  const tab = screen.getByRole('button', { name: /shuttles$/i });
  fireEvent.click(tab);
  expect(tab).toHaveStyle({ backgroundColor: 'black', color: 'white' }); // TODO failing test?
});