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

Question

I have a material-ui navbar with a couple of material-ui icons on it. One of them is a Bookmarks icon. When clicking the icon it becomes blue ( rgb(25, 118, 210) ) and when it is clicked again or somewhere in the page it should become white. This is achieved using a local variable.

 <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>

I would like to test the behavior (clicking the button twice) now using react-testing-library. I am able to test successfully that the icon becomes blue once clicked. But once clicked again I keep receiving the blue color and not the expected white or #fff or a color in rgb format.

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' });
      // });
 });

I get the following error:

● clicking bookmarks icon once becomes blue, clicking twice becomes white

expect(element).toHaveStyle() - Expected - color: white; + color: rgb(25, 118, 210);

I tried also using the waitFor method but the error becomes even larger in terms of the its output:

Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.

included the first error and a big output with printed material ui (probably) native css declarations.

Here is demo of the issue. (better download and run it locally cause it freezes for some reason although when run locally works fine).

Any thoughts or recommendations are welcome.

Answer 1

I ended up asking this question in the official react-testing-library git hub repository.

and I got the following answer from one of the contributors.

You run your tests in JSDOM which has not full CSS support

That means that only partial css behavior can be tested.

He mentioned that:

Anything. toHaveStyle has a low confidence depending on how these styles are applied. You should use visual regression tests for these types of assertions.

You can find the issue in this link for more information.