chore: migrate to nx 19.7

package.json

@@ -74,14 +74,14 @@
     "@microsoft/load-themed-styles": "1.10.26",
     "@microsoft/loader-load-themed-styles": "2.0.17",
     "@microsoft/tsdoc": "0.14.2",
-    "@nx/devkit": "19.5.7",
-    "@nx/eslint": "19.5.7",
-    "@nx/eslint-plugin": "19.5.7",
-    "@nx/jest": "19.5.7",
-    "@nx/js": "19.5.7",
-    "@nx/node": "19.5.7",
-    "@nx/plugin": "19.5.7",
-    "@nx/workspace": "19.5.7",
+    "@nx/devkit": "19.7.3",
+    "@nx/eslint": "19.7.3",
+    "@nx/eslint-plugin": "19.7.3",
+    "@nx/jest": "19.7.3",
+    "@nx/js": "19.7.3",
+    "@nx/node": "19.7.3",
+    "@nx/plugin": "19.7.3",
+    "@nx/workspace": "19.7.3",
     "@octokit/rest": "18.12.0",
     "@phenomnomnominal/tsquery": "6.1.3",
     "@playwright/test": "1.44.0",
@@ -143,7 +143,7 @@
     "@types/gulp-remember": "0.0.31",
     "@types/gulp-sourcemaps": "0.0.35",
     "@types/gulp-util": "3.0.36",
-    "@types/jest": "29.5.5",
+    "@types/jest": "29.5.13",
     "@types/jest-axe": "3.5.9",
     "@types/jju": "1.4.1",
     "@types/json-schema": "^7.0.8",
@@ -278,7 +278,7 @@
     "monosize-bundler-webpack": "0.1.5",
     "monosize-storage-azure": "0.0.15",
     "node-plop": "0.25.0",
-    "nx": "19.5.7",
+    "nx": "19.7.3",
     "p-queue": "6.6.2",
     "parse-diff": "0.7.1",
     "path-browserify": "1.0.1",

packages/fluentui/react-bindings/test/FocusZone/FocusZone-test.tsx

@@ -1482,7 +1482,7 @@ describe('FocusZone', () => {
     const innerFocusZone = focusZone.querySelector('.innerFocusZone') as HTMLElement;
     ReactTestUtils.Simulate.keyDown(innerFocusZone, { which: keyboardKey.Enter });
 
-    expect(keyDownHandler).toBeCalled();
+    expect(keyDownHandler).toHaveBeenCalled();
   });
 
   it('can call onActiveItemChanged when the active item is changed', () => {

packages/fluentui/react-bindings/test/context-selector/useContextSelector-test.tsx

@@ -52,28 +52,28 @@ describe('useContextSelector', () => {
     });
 
     expect(document.querySelector<HTMLElement>('.test-component')?.dataset.active).toBe('false');
-    expect(onUpdate).toBeCalledTimes(1);
+    expect(onUpdate).toHaveBeenCalledTimes(1);
 
     // Match => update, (v.index: 1, p.index: 1)
     act(() => {
       document.querySelector<HTMLElement>('.test-provider')?.click();
     });
     expect(document.querySelector<HTMLElement>('.test-component')?.dataset.active).toBe('true');
-    expect(onUpdate).toBeCalledTimes(2);
+    expect(onUpdate).toHaveBeenCalledTimes(2);
 
     // No match, but update because "active" changed, (v.index: 2, p.index: 1)
     act(() => {
       document.querySelector<HTMLElement>('.test-provider')?.click();
     });
     expect(document.querySelector<HTMLElement>('.test-component')?.dataset.active).toBe('false');
-    expect(onUpdate).toBeCalledTimes(3);
+    expect(onUpdate).toHaveBeenCalledTimes(3);
 
     // Match previous => no update, (v.index: 3, p.index: 1)
     act(() => {
       document.querySelector<HTMLElement>('.test-provider')?.click();
     });
     expect(document.querySelector<HTMLElement>('.test-component')?.dataset.active).toBe('false');
-    expect(onUpdate).toBeCalledTimes(3);
+    expect(onUpdate).toHaveBeenCalledTimes(3);
   });
 
   it('updates are propogated inside React.memo()', () => {
@@ -95,6 +95,6 @@ describe('useContextSelector', () => {
       document.querySelector<HTMLElement>('.test-provider')?.click();
     });
     expect(document.querySelector<HTMLElement>('.test-component')?.dataset.active).toBe('true');
-    expect(onUpdate).toBeCalledTimes(2);
+    expect(onUpdate).toHaveBeenCalledTimes(2);
   });
 });

packages/fluentui/react-bindings/test/context-selector/useContextSelectors-test.tsx

@@ -74,7 +74,7 @@ describe('useContextSelectors', () => {
 
     expect(document.querySelector<HTMLElement>('.test-component')?.dataset.active).toBe('false');
     expect(document.querySelector<HTMLElement>('.test-component')?.dataset.value).toBe('foo');
-    expect(onUpdate).toBeCalledTimes(1);
+    expect(onUpdate).toHaveBeenCalledTimes(1);
 
     // No match, (v.index: 2, p.index: 1)
     act(() => {
@@ -85,7 +85,7 @@ describe('useContextSelectors', () => {
     });
     expect(document.querySelector<HTMLElement>('.test-component')?.dataset.active).toBe('false');
     expect(document.querySelector<HTMLElement>('.test-component')?.dataset.value).toBe('foo');
-    expect(onUpdate).toBeCalledTimes(1);
+    expect(onUpdate).toHaveBeenCalledTimes(1);
 
     // // Match => update, (v.index: 1, p.index: 1)
     act(() => {
@@ -96,7 +96,7 @@ describe('useContextSelectors', () => {
     });
     expect(document.querySelector<HTMLElement>('.test-component')?.dataset.active).toBe('true');
     expect(document.querySelector<HTMLElement>('.test-component')?.dataset.value).toBe('foo');
-    expect(onUpdate).toBeCalledTimes(2);
+    expect(onUpdate).toHaveBeenCalledTimes(2);
 
     // // Match previous => no update, (v.index: 1, p.index: 1)
     act(() => {
@@ -107,7 +107,7 @@ describe('useContextSelectors', () => {
     });
     expect(document.querySelector<HTMLElement>('.test-component')?.dataset.active).toBe('true');
     expect(document.querySelector<HTMLElement>('.test-component')?.dataset.value).toBe('foo');
-    expect(onUpdate).toBeCalledTimes(2);
+    expect(onUpdate).toHaveBeenCalledTimes(2);
 
     // Match => update, (v.value: 'bar')
     act(() => {
@@ -117,7 +117,7 @@ describe('useContextSelectors', () => {
       document.querySelector<HTMLElement>('.change-value')?.click();
     });
     expect(document.querySelector<HTMLElement>('.test-component')?.dataset.value).toBe('bar');
-    expect(onUpdate).toBeCalledTimes(3);
+    expect(onUpdate).toHaveBeenCalledTimes(3);
   });
 
   it('updates are propogated inside React.memo()', () => {
@@ -140,6 +140,6 @@ describe('useContextSelectors', () => {
       document.querySelector<HTMLElement>('.change-value')?.click();
     });
     expect(document.querySelector<HTMLElement>('.test-component')?.dataset.active).toBe('true');
-    expect(onUpdate).toBeCalledTimes(2);
+    expect(onUpdate).toHaveBeenCalledTimes(2);
   });
 });

packages/fluentui/react-bindings/test/hooks/useAccessibility-test.tsx

@@ -234,15 +234,15 @@ describe('useAccessibility', () => {
       keyCode: keyboardKey.ArrowDown,
     });
 
-    expect(onKeyDown).toBeCalledTimes(1);
-    expect(onKeyDown).toBeCalledWith(
+    expect(onKeyDown).toHaveBeenCalledTimes(1);
+    expect(onKeyDown).toHaveBeenCalledWith(
       expect.objectContaining({
         keyCode: keyboardKey.ArrowDown,
       }),
     );
 
-    expect(onClick).toBeCalledTimes(1);
-    expect(onClick).toBeCalledWith(
+    expect(onClick).toHaveBeenCalledTimes(1);
+    expect(onClick).toHaveBeenCalledWith(
       expect.objectContaining({
         keyCode: keyboardKey.ArrowDown,
       }),
@@ -255,7 +255,7 @@ describe('useAccessibility', () => {
     const wrapper = mount(<TestComponent accessibility={conditionalBehavior} onKeyDown={onKeyDown} />);
 
     wrapper.find('div').simulate('keydown');
-    expect(onKeyDown).toBeCalledTimes(1);
+    expect(onKeyDown).toHaveBeenCalledTimes(1);
   });
 
   it('do not add any handlers by default', () => {
@@ -291,7 +291,7 @@ describe('useAccessibility', () => {
       keyCode: keyboardKey.ArrowDown,
     });
 
-    expect(onClick).toBeCalledTimes(2);
+    expect(onClick).toHaveBeenCalledTimes(2);
   });
 
   it('handlers are referentially stable', () => {
@@ -315,8 +315,8 @@ describe('useAccessibility', () => {
     wrapper.setProps({ onKeyDown: undefined });
     wrapper.find('div').simulate('keydown');
 
-    expect(prevOnKeyDown).toBeCalledTimes(1);
-    expect(nextOnKeyDown).toBeCalledTimes(1);
+    expect(prevOnKeyDown).toHaveBeenCalledTimes(1);
+    expect(nextOnKeyDown).toHaveBeenCalledTimes(1);
   });
 
   describe('FocusZone', () => {

packages/fluentui/react-bindings/test/hooks/useAutoControlled-test.tsx

@@ -142,6 +142,6 @@ describe('useAutoControlled', () => {
     act(() => {
       result.current[1](dispatchSpy);
     });
-    expect(dispatchSpy).toBeCalledWith('b');
+    expect(dispatchSpy).toHaveBeenCalledWith('b');
   });
 });

packages/fluentui/react-bindings/test/hooks/useStyles-test.tsx

@@ -67,7 +67,7 @@ describe('useStyles', () => {
         wrappingComponentProps: { value: { performance: {}, theme: createTheme(styles) } },
       });
 
-      expect(styles).not.toBeCalled();
+      expect(styles).not.toHaveBeenCalled();
     });
   });
 
@@ -79,7 +79,7 @@ describe('useStyles', () => {
         wrappingComponentProps: { value: { performance: {}, theme: createTheme(styles) } },
       });
 
-      expect(styles).toBeCalledWith(
+      expect(styles).toHaveBeenCalledWith(
         expect.objectContaining({
           props: { color: 'green' },
         }),

packages/fluentui/react-bindings/test/styles/resolveStyles-test.ts

@@ -99,7 +99,7 @@ describe('resolveStyles', () => {
     const { resolvedStyles } = resolveStyles(resolveStylesOptions({ renderRule }), resolvedVariables);
 
     expect(resolvedStyles.root).toMatchObject({ color: 'red' });
-    expect(renderRule).not.toBeCalled();
+    expect(renderRule).not.toHaveBeenCalled();
   });
 
   test('renders classes when slot classes getter is accessed', () => {

packages/fluentui/react-component-event-listener/test/EventListener-test.tsx

@@ -120,7 +120,7 @@ describe('EventListener', () => {
         </TestBoundary>,
       );
 
-      expect(onError).toBeCalledWith(
+      expect(onError).toHaveBeenCalledWith(
         expect.objectContaining({
           message: '`target` and `targetRef` props are mutually exclusive, please use one of them.',
         }),
@@ -141,7 +141,7 @@ describe('EventListener', () => {
         </TestBoundary>,
       );
 
-      expect(onError).toBeCalledWith(
+      expect(onError).toHaveBeenCalledWith(
         expect.objectContaining({
           message: "`target` and `targetRef` props are `undefined`, it' required to use one of them.",
         }),

packages/fluentui/react-component-nesting-registry/test/NestingAuto-test.tsx

@@ -17,7 +17,7 @@ describe('NestingAuto', () => {
       mount(<NestingAuto>{children}</NestingAuto>);
       const getRefs = children.mock.calls[0][0];
 
-      expect(children).toBeCalledWith(
+      expect(children).toHaveBeenCalledWith(
         expect.any(Function),
         expect.objectContaining({ current: expect.objectContaining({ tagName: 'DIV' }) }),
       );

packages/fluentui/react-component-ref/test/handleRef-test.ts

@@ -8,23 +8,23 @@ describe('handleRef', () => {
     expect(() => {
       // handleRef() does not accept string, but in this test we want ensure that this case will be handled
       handleRef('ref' as any, node);
-    }).toThrowError();
+    }).toThrow();
   });
 
   it('calls with node when "ref" is function', () => {
     const ref = jest.fn();
     const node = document.createElement('div');
 
     handleRef(ref, node);
-    expect(ref).toBeCalledWith(node);
+    expect(ref).toHaveBeenCalledWith(node);
   });
 
   it('does not do anything when "ref" is null', () => {
     const node = document.createElement('div');
 
     expect(() => {
       handleRef(null, node);
-    }).not.toThrowError();
+    }).not.toThrow();
   });
 
   it('assigns to "current" when "ref" is object', () => {

packages/fluentui/react-northstar-fela-renderer/test/felaFocusVisibleEnhancer-test.ts

@@ -26,7 +26,7 @@ describe('felaFocusVisibleEnhancer', () => {
     renderer.subscribe(subscription);
     renderer.renderRule(() => ({ ':focus-visible': { borderColor: 'red' } } as any), null);
 
-    expect(subscription).toBeCalledWith(
+    expect(subscription).toHaveBeenCalledWith(
       expect.objectContaining({
         pseudo: ':focus',
         selector: 'html[data-whatinput="keyboard"] .a:focus',

packages/fluentui/react-northstar-fela-renderer/test/felaSanitizeCssPlugin-test.ts

@@ -98,6 +98,6 @@ describe('felaSanitizeCssPlugin', () => {
     const onWarn = jest.spyOn(console, 'warn').mockImplementation(() => {});
 
     sanitize({ backgroundImage: 'url(../../' });
-    expect(onWarn).toBeCalledWith(expect.stringMatching(/was passed to property/));
+    expect(onWarn).toHaveBeenCalledWith(expect.stringMatching(/was passed to property/));
   });
 });

packages/fluentui/react-northstar/test/specs/commonTests/handlesAccessibility.tsx

@@ -118,7 +118,7 @@ export const handlesAccessibility = (
         });
       });
 
-      expect(eventHandler).toBeCalledTimes(1);
+      expect(eventHandler).toHaveBeenCalledTimes(1);
     });
   }
 };

packages/fluentui/react-northstar/test/specs/commonTests/isConformant.tsx

@@ -326,7 +326,7 @@ export function isConformant(
         const wrapper = mount(<Component {...wrapperProps} />);
 
         getEventTargetComponent(wrapper, listenerName, eventTargets).simulate(eventName);
-        expect(handler).toBeCalledTimes(1);
+        expect(handler).toHaveBeenCalledTimes(1);
       });
     });
   }
@@ -583,7 +583,7 @@ export function isConformant(
 
           const element = getComponent(wrapper);
           expect(typeof element.type()).toBe('string');
-          expect(rootRef).toBeCalledWith(expect.objectContaining({ tagName: _.upperCase(element.type()) }));
+          expect(rootRef).toHaveBeenCalledWith(expect.objectContaining({ tagName: _.upperCase(element.type()) }));
         });
       }
     });

packages/fluentui/react-northstar/test/specs/components/Accordion/Accordion-test.tsx

@@ -235,7 +235,7 @@ describe('Accordion', () => {
       const wrapper = mountWithProvider(<Accordion panels={panels} onTitleClick={onTitleClick} />);
       getTitleButtonAtIndex(wrapper, 0).simulate('click');
 
-      expect(onTitleClick).toBeCalledTimes(1);
+      expect(onTitleClick).toHaveBeenCalledTimes(1);
     });
 
     it('renders just active panels', () => {

packages/fluentui/react-northstar/test/specs/components/Animation/Animation-test.tsx

@@ -16,10 +16,10 @@ describe('Animation', () => {
   });
 
   test('does not throw if children is not passed', () => {
-    expect(() => mountWithProvider(<Animation />)).not.toThrowError();
+    expect(() => mountWithProvider(<Animation />)).not.toThrow();
   });
 
   test('does not throw if children function returns undefined', () => {
-    expect(() => mountWithProvider(<Animation children={() => undefined} />)).not.toThrowError();
+    expect(() => mountWithProvider(<Animation children={() => undefined} />)).not.toThrow();
   });
 });

packages/fluentui/react-northstar/test/specs/components/Attachment/Attachment-test.tsx

@@ -53,7 +53,7 @@ describe('Attachment', () => {
       findIntrinsicElement(attachment, `.${attachmentActionClassName}`).simulate('keydown', {
         keyCode: keyboardKey.Enter,
       });
-      expect(onClickAttachment).not.toBeCalled();
+      expect(onClickAttachment).not.toHaveBeenCalled();
     });
   });
 });