From f6e827869822f0ad45fea31a2b84148984f328b4 Mon Sep 17 00:00:00 2001
From: Martin Hochel <martinhochel@microsoft.com>
Date: Thu, 1 Jun 2023 13:09:04 +0200
Subject: [PATCH] test(react-northstar): fix tests that have issues with
 jest.mock and jest.fn not being called properly

---
 .../components/Chat/ChatMessage-test.tsx      | 32 ++++++++-----------
 .../mergeProviderContexts-test.ts             |  5 ++-
 2 files changed, 18 insertions(+), 19 deletions(-)

diff --git a/packages/fluentui/react-northstar/test/specs/components/Chat/ChatMessage-test.tsx b/packages/fluentui/react-northstar/test/specs/components/Chat/ChatMessage-test.tsx
index eb3a01e91c9baf..eaaeb0ff44af14 100644
--- a/packages/fluentui/react-northstar/test/specs/components/Chat/ChatMessage-test.tsx
+++ b/packages/fluentui/react-northstar/test/specs/components/Chat/ChatMessage-test.tsx
@@ -1,23 +1,15 @@
 import * as React from 'react';
 
+import { LikeIcon } from '@fluentui/react-icons-northstar';
+
 import { handlesAccessibility, implementsShorthandProp, isConformant } from 'test/specs/commonTests';
+import { mountWithProvider, EmptyThemeProvider } from 'test/utils';
 
 import { ChatMessage } from 'src/components/Chat/ChatMessage';
 import { Text } from 'src/components/Text/Text';
-import { usePopper } from 'src/utils/positioner';
-import { LikeIcon } from '@fluentui/react-icons-northstar';
 import { ChatMessageDetails } from 'src/components/Chat/ChatMessageDetails';
 import { ChatMessageContent } from 'src/components/Chat/ChatMessageContent';
-import { mountWithProvider, EmptyThemeProvider } from 'test/utils';
-
-jest.mock('src/utils/positioner', () => {
-  const actualPositioner = jest.requireActual('src/utils/positioner');
-
-  return {
-    ...actualPositioner,
-    usePopper: jest.fn().mockReturnValue(actualPositioner.usePopper),
-  };
-});
+import * as positionerApi from 'src/utils/positioner';
 
 const chatMessageImplementsShorthandProp = implementsShorthandProp(ChatMessage);
 
@@ -39,8 +31,12 @@ describe('ChatMessage', () => {
     handlesAccessibility(ChatMessage);
   });
 
-  describe('rtl', () => {
-    beforeEach(() => jest.clearAllMocks());
+  describe.only('rtl', () => {
+    let usePopperSpy;
+    beforeEach(() => {
+      jest.clearAllMocks();
+      usePopperSpy = jest.spyOn(positionerApi, 'usePopper');
+    });
 
     function render(wrappingComponent?: React.ComponentType) {
       const actionMenu = {
@@ -70,15 +66,15 @@ describe('ChatMessage', () => {
       const RTLProvider = props => <EmptyThemeProvider {...props} rtl={true} />;
       render(RTLProvider);
 
-      expect(usePopper).toHaveBeenCalledTimes(1);
-      expect(usePopper).toHaveBeenCalledWith(expect.objectContaining({ rtl: true }));
+      expect(usePopperSpy).toHaveBeenCalledTimes(1);
+      expect(usePopperSpy).toHaveBeenCalledWith(expect.objectContaining({ rtl: true }));
     });
 
     it('should pass rtl parameter as undefined to usePopper in LTR', () => {
       render();
 
-      expect(usePopper).toHaveBeenCalledTimes(1);
-      expect(usePopper).toHaveBeenCalledWith(expect.objectContaining({ rtl: undefined }));
+      expect(usePopperSpy).toHaveBeenCalledTimes(1);
+      expect(usePopperSpy).toHaveBeenCalledWith(expect.objectContaining({ rtl: undefined }));
     });
   });
 });
diff --git a/packages/fluentui/react-northstar/test/specs/utils/mergeProviderContexts/mergeProviderContexts-test.ts b/packages/fluentui/react-northstar/test/specs/utils/mergeProviderContexts/mergeProviderContexts-test.ts
index e922944ffb01ba..bc6ef04f8922dc 100644
--- a/packages/fluentui/react-northstar/test/specs/utils/mergeProviderContexts/mergeProviderContexts-test.ts
+++ b/packages/fluentui/react-northstar/test/specs/utils/mergeProviderContexts/mergeProviderContexts-test.ts
@@ -1,8 +1,11 @@
 import { ProviderContextInput } from '@fluentui/react-bindings';
+import type { CreateRenderer } from '@fluentui/react-northstar-styles-renderer';
 import { mergeProviderContexts, mergePerformanceOptions, getRenderer } from 'src/utils/mergeProviderContexts';
 
 describe('getRenderer', () => {
-  const createRenderer = jest.fn().mockImplementation(target => ({ target }));
+  const createRenderer = (target => {
+    return { target };
+  }) as unknown as CreateRenderer;
 
   test(`without "target" defaults to a document`, () => {
     // will be "undefined" as we call createRenderer() with "undefined"