chore(v0): enable emit only dts and use new conformance test API to narrow down TS Program

packages/fluentui/e2e/tsconfig.json

@@ -3,9 +3,10 @@
   "compilerOptions": {
     "allowSyntheticDefaultImports": true,
     "isolatedModules": false,
+    "noEmit": true,
+    "emitDeclarationOnly": false,
     "module": "esnext",
-    "types": ["node", "webpack-env", "cypress", "cypress-real-events"],
-    "skipLibCheck": true
+    "types": ["node", "webpack-env", "cypress", "cypress-real-events"]
   },
   "include": ["."]
 }

packages/fluentui/perf/tsconfig.json

@@ -2,6 +2,7 @@
   "extends": "../../../tsconfig.base.v0.json",
   "compilerOptions": {
     "noEmit": true,
+    "emitDeclarationOnly": false,
     "module": "esnext",
     "types": ["node", "webpack-env"]
   },

packages/fluentui/projects-test/tsconfig.json

@@ -4,9 +4,8 @@
     "allowSyntheticDefaultImports": true,
     "module": "esnext",
     "types": ["node"],
-    "skipLibCheck": true,
     "outDir": "dist/dts",
-    "noEmit": true,
+    "emitDeclarationOnly": false,
     "composite": true
   },
   "include": ["src"],

packages/fluentui/react-northstar/jest.config.js

@@ -1,13 +1,25 @@
+const path = require('path');
+const fs = require('fs');
+const { workspaceRoot } = require('@nrwl/devkit');
+const { pathsToModuleNameMapper } = require('ts-jest');
 const { createV0Config: commonConfig } = require('@fluentui/scripts-jest');
 
 const config = commonConfig({
-  name: 'react',
+  displayName: 'react-northstar',
   moduleNameMapper: {
     // Legacy aliases, they should not be used in new tests
-    '^src/(.*)$': `<rootDir>/src/$1`,
-    'test/(.*)$': `<rootDir>/test/$1`,
+    ...getAliases(),
   },
 });
 config.setupFilesAfterEnv = [...config.setupFilesAfterEnv, './jest-setup.js'];
 
 module.exports = config;
+
+function getAliases() {
+  const tsConfig = JSON.parse(fs.readFileSync(path.join(__dirname, 'tsconfig.spec.json')));
+  const tsPathAliases = pathsToModuleNameMapper(tsConfig.compilerOptions.paths, {
+    prefix: `<rootDir>/${path.relative(__dirname, workspaceRoot)}/`,
+  });
+
+  return tsPathAliases;
+}

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

@@ -1,6 +1,6 @@
 import * as _ from 'lodash';
 import * as path from 'path';
-import { TestObject } from '@fluentui/react-conformance';
+import type { TestObject } from '@fluentui/react-conformance';
 
 import * as doctrine from 'doctrine';
 

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

@@ -22,7 +22,7 @@ import * as FluentUI from 'src/index';
 import { getEventTargetComponent, EVENT_TARGET_ATTRIBUTE } from './eventTarget';
 import { extraConformanceTests } from './extraConformanceTests';
 
-export interface Conformant<TProps = {}>
+interface Conformant<TProps = {}>
   extends Pick<IsConformantOptions<TProps>, 'disabledTests' | 'testOptions' | 'getTargetElement'> {
   /** Path to the test file. */
   testPath: string;
@@ -75,6 +75,7 @@ export function isConformant(
   } = options;
 
   const defaultConfig: IsConformantOptions = {
+    tsConfig: { configName: 'tsconfig.spec.json' },
     renderOptions: { wrapper: EmptyThemeProvider },
     componentPath: testPath
       .replace(/test[/\\]specs/, 'src')

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

@@ -60,8 +60,6 @@ const getNavigationNavigationItemAtIndexWrapper = (wrapper: ReactWrapper, index:
   findIntrinsicElement(wrapper, `.${carouselNavigationItemClassName}`).at(index);
 const getButtonWrapper = (wrapper: ReactWrapper): CommonWrapper => findIntrinsicElement(wrapper, `#${buttonName}`);
 
-jest.useFakeTimers();
-
 describe('Carousel', () => {
   isConformant(Carousel, {
     testPath: __filename,
@@ -244,6 +242,8 @@ describe('Carousel', () => {
       items: items.map(item => ({ key: item.key, icon: { name: 'icon-circle' } })),
     };
 
+    jest.useFakeTimers();
+
     afterEach(() => {
       jest.runAllTimers();
     });

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

@@ -12,7 +12,6 @@ import { ShorthandValue } from 'src/types';
 import { List } from 'src/components/List/List';
 
 jest.dontMock('@fluentui/keyboard-key');
-jest.useFakeTimers();
 
 describe('Dropdown', () => {
   isConformant(Dropdown, {
@@ -327,6 +326,7 @@ describe('Dropdown', () => {
   });
 
   describe('highlightedIndex', () => {
+    jest.useFakeTimers();
     afterEach(() => {
       act(() => {
         jest.runAllTimers();
@@ -1292,6 +1292,7 @@ describe('Dropdown', () => {
   });
 
   describe('getA11ySelectionMessage', () => {
+    jest.useFakeTimers();
     afterEach(() => {
       jest.runAllTimers();
     });

packages/fluentui/react-northstar/tsconfig.json

@@ -3,13 +3,10 @@
   "compilerOptions": {
     "composite": true,
     "outDir": "dist/dts",
-    "skipLibCheck": true,
     "types": ["node", "jest", "@testing-library/jest-dom"],
     "paths": {
-      "docs/*": ["packages/fluentui/docs/*"],
       "src/*": ["packages/fluentui/react-northstar/src/*"],
-      "test/*": ["packages/fluentui/react-northstar/test/*"],
-      "@fluentui/a11y-testing": ["packages/a11y-testing/src/index"]
+      "test/*": ["packages/fluentui/react-northstar/test/*"]
     }
   },
   "include": ["src", "test"],

packages/fluentui/react-northstar/tsconfig.spec.json

@@ -0,0 +1,14 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "noEmit": true,
+    "emitDeclarationOnly": false,
+    "composite": false,
+    "types": ["node", "jest", "@testing-library/jest-dom"],
+    "paths": {
+      "src/*": ["packages/fluentui/react-northstar/src/*"],
+      "test/*": ["packages/fluentui/react-northstar/test/*"]
+    }
+  },
+  "include": ["test"]
+}

scripts/jest/src/jest.preset.v0.js

@@ -16,6 +16,8 @@ const createConfig = (/** @type {import('@jest/types').Config.InitialOptions} */
   verbose: false,
   watchPlugins: ['jest-watch-typeahead/filename', 'jest-watch-typeahead/testname'],
   testEnvironment: 'jsdom',
+  restoreMocks: true,
+  clearMocks: true,
   ...customConfig,
   moduleNameMapper: {
     ...getLernaAliases({

scripts/jest/src/v0/setupTests.js

@@ -3,24 +3,10 @@
  * This is the bootstrap code that is run before any tests, utils, mocks.
  */
 
-const enzyme = require('enzyme');
 const Adapter = require('@wojtekmaj/enzyme-adapter-react-17');
+const enzyme = require('enzyme');
 
 enzyme.configure({
   adapter: new Adapter(),
   disableLifecycleMethods: true,
 });
-
-if (process.env.TF_BUILD) {
-  jest.spyOn(console, 'log');
-  jest.spyOn(console, 'info');
-  jest.spyOn(console, 'warn');
-  jest.spyOn(console, 'error');
-
-  afterAll(() => {
-    expect(console.log).not.toHaveBeenCalled();
-    expect(console.info).not.toHaveBeenCalled();
-    expect(console.warn).not.toHaveBeenCalled();
-    expect(console.error).not.toHaveBeenCalled();
-  });
-}

tsconfig.base.v0.json

@@ -7,6 +7,7 @@
     "jsx": "react",
     "isolatedModules": true,
     "moduleResolution": "node",
+    "emitDeclarationOnly": true,
     "pretty": true,
     "allowJs": false,
     "noImplicitReturns": true,