Reactjs 在使用react testing library进行测试期间，单击两次材质ui图标不会将其颜色更改为默认颜色

我有一个材质ui导航栏，上面有几个材质ui图标。其中之一是书签图标。单击图标时，它会变为蓝色（

rgb（25118210）

），再次单击图标或页面中的某个位置时，它会变为白色。这是使用局部变量实现的

 <Popover
     ...
     trigger={
       <IconButton classes={{ root: classes.topBarIconButton }}>
          <BookmarksIcon aria-label="bookmarks icon" className={classes.favoriteIcon} />
       </IconButton>
     }
     onEnter={() => setBookmarksOpen(true)}
     onClose={() => setBookmarksOpen(false)}
     >
     <BookmarksList pageTitle={pageTitle} />
 </Popover>

我得到以下错误：

● 单击书签图标一次变为蓝色，单击两次变为蓝色 白色的

我还尝试使用

waitFor

方法，但就其输出而言，错误变得更大：

无法对未安装的组件执行React状态更新。这是 无操作，但表示应用程序内存泄漏。要解决， 取消useEffect清理中的所有订阅和异步任务 功能

包括第一个错误和一个带有印刷材料ui（可能）原生css声明的大输出

这是问题的关键。（最好下载并在本地运行它，因为它会由于某种原因冻结，尽管在本地运行时效果很好）

---

欢迎提出任何想法或建议。

我最后在官方的react测试库git hub存储库中提出了这个问题

我从一位投稿人那里得到了以下答案

您在JSDOM中运行测试，而JSDOM不完全支持CSS

这意味着只能测试部分css行为

他提到：

任何东西。

toHaveStyle

的可信度都很低，这取决于这些样式的应用方式。您应该对这些类型的断言使用可视化回归测试

有关更多信息，您可以在此中找到问题

test('clicking bookmarks icon once becomes blue, clicking twice becomes white', () => {
      renderWithAllProviders(<Topbar {...props} />, reduxState);
    
      const bookmarksIcon = screen.getByLabelText('bookmarks icon');
      userEvent.click(bookmarksIcon);
      // bookmarks icon color becomes blue on click
      expect(bookmarksIcon).toHaveStyle({ color: 'rgb(25, 118, 210)' }); // this works as expected
      
      userEvent.click(bookmarksIcon);
      // bookmarks icon color becomes white on second click
      expect(bookmarksIcon).toHaveStyle({ color: 'white' }); // this does not work as expected
    
      // 2nd attempt
      // await waitFor(async () => {
      //   // const asyncBookmarksIcon = await screen.findByLabelText('bookmarks icon');
      //   expect(asyncBookmarksIcon).toHaveStyle({ color: 'white' });
      // });
 });

expect(element).toHaveStyle()

- Expected

- color: white;
+ color: rgb(25, 118, 210);