fix(motion): improve Web Animations API detection in tests

change/@fluentui-react-motion-6948133f-0a73-49c2-9916-32dd176969ae.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: improve Web Animations API detection in tests",
+  "packageName": "@fluentui/react-motion",
+  "email": "olfedias@microsoft.com",
+  "dependentChangeType": "patch"
+}

packages/react-components/react-motion/library/src/factories/createMotionComponent.test.tsx

@@ -4,13 +4,6 @@ import * as React from 'react';
 import type { AtomMotion } from '../types';
 import { createMotionComponent } from './createMotionComponent';
 
-jest.mock('./createMotionComponent', () => {
-  // Add a mock for the `animate` method on the HTMLElement prototype as jsdom does not support it
-  Element.prototype.animate = jest.fn();
-
-  return jest.requireActual('./createMotionComponent');
-});
-
 const motion: AtomMotion = {
   keyframes: [{ opacity: 0 }, { opacity: 1 }],
   duration: 500,
@@ -42,10 +35,6 @@ function createElementMock() {
 }
 
 describe('createMotionComponent', () => {
-  it('has mock for .animate()', () => {
-    expect(Element.prototype.animate).toBeDefined();
-  });
-
   it('creates a motion and plays it', () => {
     const TestAtom = createMotionComponent(motion);
     const { animateMock, ElementMock } = createElementMock();

packages/react-components/react-motion/library/src/factories/createPresenceComponent-jest.test.tsx

@@ -8,7 +8,7 @@ import { createPresenceComponent } from './createPresenceComponent';
 const keyframes = [{ opacity: 0 }, { opacity: 1 }];
 const options = { duration: 500, fill: 'forwards' as const };
 
-const TestAtom = createPresenceComponent({
+const TestPresence = createPresenceComponent({
   enter: { keyframes, ...options },
   exit: { keyframes: keyframes.slice().reverse(), ...options },
 });
@@ -23,9 +23,9 @@ const TestComponent: React.FC<{ appear?: boolean; finish?: () => void }> = props
   return (
     <>
       <button onClick={() => setVisible(v => !v)}>Click me</button>
-      <TestAtom appear={appear} onMotionFinish={onMotionFinish} visible={visible} unmountOnExit>
+      <TestPresence appear={appear} onMotionFinish={onMotionFinish} visible={visible} unmountOnExit>
         <div>Hello</div>
-      </TestAtom>
+      </TestPresence>
     </>
   );
 };
@@ -37,7 +37,7 @@ const TestComponent: React.FC<{ appear?: boolean; finish?: () => void }> = props
 //
 // This test suite ensures that the component works correctly in tests using that environment.
 
-describe('createPresenceComponent', () => {
+describe('createPresenceComponent (jest)', () => {
   it('does not support .animate()', () => {
     expect(Element.prototype.animate).toBeUndefined();
   });

packages/react-components/react-motion/library/src/factories/createPresenceComponent-node.test.tsx

@@ -0,0 +1,47 @@
+/*
+ * @jest-environment node
+ */
+
+// 👆 this is intentionally to test in SSR like environment
+
+import * as React from 'react';
+import { renderToStaticMarkup } from 'react-dom/server';
+
+import { createPresenceComponent } from './createPresenceComponent';
+
+const keyframes = [{ opacity: 0 }, { opacity: 1 }];
+const options = { duration: 500, fill: 'forwards' as const };
+
+const TestPresence = createPresenceComponent({
+  enter: { keyframes, ...options },
+  exit: { keyframes: keyframes.slice().reverse(), ...options },
+});
+
+// Heads up!
+//
+// Unfortunately, jsdom (the optional environment for Jest) does not support the Web Animations API, which is used by
+// createPresenceComponent() to animate elements.
+//
+// This test suite ensures that the component works correctly in tests using that environment.
+
+describe('createPresenceComponent (node)', () => {
+  it('renders a child component when "visible" is "true"', () => {
+    const html = renderToStaticMarkup(
+      <TestPresence visible>
+        <div data-tid="child" />
+      </TestPresence>,
+    );
+
+    expect(html).toMatchInlineSnapshot(`"<div data-tid=\\"child\\"></div>"`);
+  });
+
+  it('does not render a child component when "visible" is "false" & "unmountOnExit"', () => {
+    const html = renderToStaticMarkup(
+      <TestPresence unmountOnExit visible={false}>
+        <div data-tid="child" />
+      </TestPresence>,
+    );
+
+    expect(html).toMatchInlineSnapshot(`""`);
+  });
+});