React，Jest和React测试库：控制台错误“测试中的菜单更新未包含在行为中”

如何解决React，Jest和React测试库：控制台错误“测试中的菜单更新未包含在行为中”

Jest中的此警告使我感到非常困惑，因为据我所知，我的组件不会更新状态，并且我不会引入任何副作用。

问题出在chakra-ui MenuList组件中，我认为当我删除它时，测试运行正常。

尝试将我的render方法包装在act中，并使用async/await，因为screen.debug()会像我期望的那样显示该组件。

组件：

import React from 'react';
import { useRouter } from 'next/router';
import {
  Flex,Box,Icon,Menu,MenuButton,MenuList,MenuItem,} from '@chakra-ui/core';
import {
  FaHome,FaCloudUploadAlt,FaFolderOpen,FaAngleDown,} from 'react-icons/fa';
import { TFunction } from 'next-i18next';
import { withTranslation,Router } from '../../../i18n';

const menuItems = [
  { href: '/',translation: 'HOME',icon: FaHome },{
    href: '/policy-management',translation: 'POLICY_MANAGEMENT',icon: FaFolderOpen,subMenu: [
      {
        href: '/policy-management',translation: 'VIEW_POLICIES',},{
        href: '/policy-management/create',translation: 'CREATE_POLICY',],{
    href: '/document-upload',translation: 'DOCUMENT_UPLOAD',icon: FaCloudUploadAlt,];

interface HeaderProps {
  readonly t: TFunction;
}

const Header = ({ t }: HeaderProps): JSX.Element => {
  const { route } = useRouter();

  return (
    <>
      <Flex h="100px" bg="brand-blue.900" direction="row" alignItems="center">
        {menuItems.map(item => (
          <Menu key={item.href}>
            <MenuButton
              as={Box}
              cursor="pointer"
              color={
                route.split('/')[1] === item.href.split('/')[1]
                  ? 'white'
                  : 'brand-blue.300'
              }
              textTransform="uppercase"
              fontWeight="bold"
              marginRight="10"
              _hover={{ color: 'white' }}
              onClick={() => (!item?.subMenu ? Router.push(item.href) : null)}
            >
              <Icon as={item.icon} marginRight="2" marginTop="-1" />
              {t(item.translation)}
              {!item?.subMenu ? null : (
                <Icon as={FaAngleDown} marginLeft="1" marginTop="-1" />
              )}
            </MenuButton>
            {!item?.subMenu ? null : (
              <MenuList py="0">
                {item.subMenu.map(subItem => (
                  <MenuItem
                    key={subItem.href}
                    color="brand-grey.800"
                    paddingY="3"
                    fontWeight="bold"
                    fontSize="sm"
                    borderBottom="1px"
                    borderBottomColor="brand-grey.50"
                    _hover={{ backgroundColor: 'brand-blue.50' }}
                    _last={{ borderBottom: '0' }}
                    onClick={() => Router.push(subItem.href)}
                  >
                    {t(subItem.translation)}
                  </MenuItem>
                ))}
              </MenuList>
            )}
          </Menu>
        ))}
      </Flex>
    </>
  );
};

export default withTranslation('common')(Header);

测试规范：

import React from 'react';
import { render,screen } from '@testing-library/react';
import { I18nextProvider } from 'react-i18next';
import { i18n } from '../../../i18n';
import Header from './Header';

jest.mock('next/router',() => ({
  useRouter() {
    return {
      prefetch: () => null,push: jest.fn(),route: '/',};
  },}));

describe('<Header/>',() => {
  test('it should render',() => {
    render(
      <I18nextProvider i18n={i18n}>
        <Header />
      </I18nextProvider>
    );

    expect(screen.getByText(/HOME/i)).toBeInTheDocument();
    expect(screen.getByText(/POLICY_MANAGEMENT/i)).toBeInTheDocument();
    expect(screen.getByText(/DOCUMENT_UPLOAD/i)).toBeInTheDocument();
  });
});

有什么明显的我想念的东西吗？