reactjs - react-test-renderer と typescript を使用した MUI メニュー コンポーネントのテスト

Question

与えられたコンポーネントMenu.tsx

import React, { useState } from 'react';
import { Grid, Button, Menu, MenuItem } from '@material-ui/core';

const Component = () => {
  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);

  const handleMenuClick = (event: React.MouseEvent<HTMLButtonElement>) => {
    setAnchorEl(event.currentTarget);
  };

  const handleMenuClose = () => {
    setAnchorEl(null);
  };

  return (
    <Grid>
      <Button variant="contained" onClick={handleMenuClick}>
        Open Menu
      </Button>
      <Menu
        anchorEl={anchorEl}
        keepMounted
        open={Boolean(anchorEl)}
        onClose={handleMenuClose}
      >
        <MenuItem>Option 1</MenuItem>
        <MenuItem>Option 2</MenuItem>
      </Menu>
    </Grid>
  );
};

export default Component;

そしてスナップショットのテストMenu.test.tsx

import React from 'react';
import { create } from 'react-test-renderer';
import Menu from './Menu';

describe('Menu Snapshot', () => {
  it('renders correctly', () => {
    const tree = create(<Menu />).toJSON();
    expect(tree).toMatchSnapshot();
  });
});

テストを実行すると、エラーが発生しますTypeError: parentInstance.children.indexOf is not a function。

グーグルで調べた後、 createNodeMock 関数を追加しようとしました:

const tree = create(<Menu />, {
  createNodeMock: (element) => element,
}).toJSON();

エラーが発生しますArgument appears to not be a ReactComponent. Keys: type,props。

内部で何が起こっているのかよくわからないので、私が見つけた回避策はうまくいきませんでした。これをテストする正しい方法は何ですか？

codesanbox.ioへのリンク。