有没有办法用react- test -renderer测试Chakra-ui模式对话框？

npm install react-test-renderer --save-dev

npm install @chakra-ui/react @emotion/react @emotion/styled framer-motion

import React from 'react';
import { render } from 'react-test-renderer';
import { ChakraProvider, extendTheme, AlertDialog, AlertDialogBody, AlertDialogFooter, AlertDialogHeader, AlertDialogContent, AlertDialogOverlay, Button, useDisclosure } from '@chakra-ui/react';

const theme = extendTheme({});

const TestDialog = () => {
  const { isOpen, onOpen, onClose } = useDisclosure();

  return (
    <ChakraProvider theme={theme}>
      <Button onClick={onOpen}>Open Dialog</Button>
      <AlertDialog isOpen={isOpen} onClose={onClose} motionPreset="slideInBottom">
        <AlertDialogOverlay>
          <AlertDialogContent>
            <AlertDialogHeader>Dialog Title</AlertDialogHeader>
            <AlertDialogBody>Dialog content goes here.</AlertDialogBody>
            <AlertDialogFooter>
              <Button variant="ghost" onClick={onClose}>Cancel</Button>
              <Button colorScheme="red" ml={3}>Confirm</Button>
            </AlertDialogFooter>
          </AlertDialogContent>
        </AlertDialogOverlay>
      </AlertDialog>
    </ChakraProvider>
  );
};

export default TestDialog;

import React from 'react';
import { render, screen } from 'react-test-renderer';
import TestDialog from './TestDialog';

test('renders dialog correctly', () => {
  render(<TestDialog />);
  
  // Use screen queries to assert the presence of dialog elements
  expect(screen.getByText('Open Dialog')).toBeInTheDocument();
  expect(screen.queryByText('Dialog Title')).not.toBeInTheDocument();
  
  // Trigger the dialog
  screen.getByText('Open Dialog').click();
  
  // Assert the dialog is opened
  expect(screen.getByText('Dialog Title')).toBeInTheDocument();
});