Improve DrawerContent performance (Jest)

[MashaSinkevich]

Description

We have several thousands of jest tests and their speed requires improvement.

Problem Statement/Justification

During one of the investigations we've found that our slowest tests are related to Drawer.

When we mocked DrawerContent we saw SIGNIFICANT changes on tests running speed on CI:

jest.mock('@chakra-ui/react', () => ({
    ...jest.requireActual('@chakra-ui/react'),
    usePrefersReducedMotion: () => true,
    DrawerContent: ({ children }: PropsWithChildren) => {
      return (
        <div role="dialog" aria-modal="true" data-test-id="drawer-content-mock">
          {children}
        </div>
      )
    },
  }))

Important to note that we already had usePrefersReducedMotion in our mocks so this does not affect the speed.

We assume that this could be related to the usage of framer-motion.

But interesting that if remove animation from framer-motion via motionProps (at least this override removes it visually if to do this on a real web code) there are no changes in the running speed:

jest.mock('@chakra-ui/react', () => ({
    ...jest.requireActual('@chakra-ui/react'),
    usePrefersReducedMotion: () => true,
    DrawerContent: ({ children, ...restProps }: PropsWithChildren) => {
      const { DrawerContent } = jest.requireActual('@chakra-ui/react')

      return (
        <DrawerContent
          {...restProps}
          motionProps={{
            transformTemplate: () => 'none',
          }}
        >
          {children}
        </DrawerContent>
      )
    },
  }))

Proposed Solution or API

No ideas for now, I will try to look in to it more and maybe I will have ideas.

As far as I can see, the animation is done not via transition-duration but via constant recalculation of transform values, which potentially gives us this slow speed in Jest:

Alternatives

No response

Additional Information

I was not able to find any working solution of how to mock framer-motion in Chakra UI so the code which I am showing here is just smth to what I came independently.

Sources that I've tried without luck:
#5449
https://dev.to/tmikeschu/mocking-framer-motion-v4-19go
https://github.com/chakra-ui/chakra-ui/blob/main/packages/components/theme/src/foundations/transition.ts (potentially remove transitionDurarion for tests)

Also important to mention that I've tried to mock other places with framer-motion but this did not give difference in run time locally (I will list here all variants at once so it would be more compact):

jest.mock('@chakra-ui/react', () => ({
    ...jest.requireActual('@chakra-ui/react'),
    usePrefersReducedMotion: () => true,
    // Variant 1 of DrawerContent mock, significant change in the run time both locally and CI
    DrawerContent: ({ children, ...restProps }: PropsWithChildren) => {
      return (
        <div role="dialog" aria-modal="true" data-test-id="drawer-content-mock" {...restProps}>
          {children}
        </div>
      )
    },
    // Variant 2 of DrawerContent mock, no change in run time locally (did not tested on CI)
    DrawerContent: ({ children, ...restProps }: PropsWithChildren) => {
      const { DrawerContent } = jest.requireActual('@chakra-ui/react')

      return (
        <DrawerContent
          {...restProps}
          motionProps={{
            transformTemplate: () => 'none',
          }}
        >
          {children}
        </DrawerContent>
      )
    },
    // Variant 1 of Collapse mock, no change in run time locally (did not tested on CI)
    Collapse: ({ children, ...restProps }: PropsWithChildren) => {
      const { Collapse } = jest.requireActual('@chakra-ui/react')

      return (
        <Collapse {...restProps} transition={{ exit: { duration: 0 }, enter: { duration: 0 } }}>
          {children}
        </Collapse>
      )
    },
    // Variant 2 of Collapse mock, no change in run time locally (did not tested on CI)
    Collapse: ({ children, isOpen, ...restProps }: PropsWithChildren) => {
      if (!isOpen) {
        return null
      }
      return (
        <div className="chakra-collapse-mock" {...restProps}>
          {children}
        </div>
      )
    },
    // Variant 1 of ModalContent mock, no change in run time locally (did not tested on CI)
    ModalContent: ({ children, ...restProps }: PropsWithChildren) => {
      return (
        <section role="alertdialog" aria-modal="true" data-test-id="modal-content-mock" {...restProps}>
          {children}
        </section>
      )
    },
  }))

[bfsgr]

Same thing happens in Vitest, significant speed increase when DrawerContent, Collapse and ModalContent are mocked to not use transitions

[Aa37573112]

bb 2024年3月20日 上午1:54:38 [GMT+08:00]，Bruno Fusieger ***@***.***> 寫道：

…

Same thing happens in Vitest, significant speed increase when DrawerContent, Collapse and ModalContent are mocked to not use transitions -- Reply to this email directly or view it on GitHub: #8033 (comment) You are receiving this because you are subscribed to this thread. Message ID: ***@***.***>