refactor: import jest as global; unify import style of some modules (#6898)

* refactor: import jest as global

* fix react

Author: Josh-Cena

.eslintrc.js

@@ -166,7 +166,12 @@ module.exports = {
       //   selector:
       // @   'ExportDefaultDeclaration > Identifier, ExportNamedDeclaration[source=null] > ExportSpecifier',
       //   message: 'Export in one statement'
-      // }
+      // },
+      ...['path', 'fs-extra', 'webpack', 'lodash'].map((m) => ({
+        selector: `ImportDeclaration[importKind=value]:has(Literal[value=${m}]) > ImportSpecifier[importKind=value]`,
+        message:
+          'Default-import this, both for readability and interoperability with ESM',
+      })),
     ],
     'no-template-curly-in-string': WARNING,
     'no-unused-expressions': [WARNING, {allowTaggedTemplates: true}],
@@ -312,5 +317,11 @@ module.exports = {
         '@typescript-eslint/explicit-module-boundary-types': OFF,
       },
     },
+    {
+      files: ['*.test.ts', '*.test.tsx'],
+      rules: {
+        'import/no-extraneous-dependencies': OFF,
+      },
+    },
   ],
 };

__tests__/validate-package-json.test.ts

@@ -4,7 +4,6 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-/* eslint-disable import/no-extraneous-dependencies */
 
 import {Globby} from '@docusaurus/utils';
 import fs from 'fs-extra';

packages/docusaurus-logger/src/__tests__/index.test.ts

@@ -5,6 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+import {jest} from '@jest/globals';
 import logger from '../index';
 
 describe('formatters', () => {

packages/docusaurus-mdx-loader/src/remark/transformImage/__tests__/index.test.ts

@@ -5,6 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+import {jest} from '@jest/globals';
 import path from 'path';
 import remark from 'remark';
 import mdx from 'remark-mdx';

packages/docusaurus-mdx-loader/src/remark/unwrapMdxCodeBlocks/__tests__/index.test.ts

@@ -5,22 +5,20 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import {join} from 'path';
+import path from 'path';
 import remark from 'remark';
 import mdx from 'remark-mdx';
 import vfile from 'to-vfile';
 import plugin from '..';
 
-const processFixture = async (name) => {
-  const path = join(__dirname, '__fixtures__', name);
-  const file = await vfile.read(path);
+const processFixture = async (name: string) => {
+  const file = await vfile.read(path.join(__dirname, '__fixtures__', name));
   const result = await remark().use(mdx).use(plugin).process(file);
   return result.toString();
 };
 
-const processFixtureAST = async (name) => {
-  const path = join(__dirname, '__fixtures__', name);
-  const file = await vfile.read(path);
+const processFixtureAST = async (name: string) => {
+  const file = await vfile.read(path.join(__dirname, '__fixtures__', name));
   return remark().use(mdx).use(plugin).parse(file);
 };
 

packages/docusaurus-migrate/src/__tests__/migration.test.ts

@@ -5,6 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+import {jest} from '@jest/globals';
 import {migrateDocusaurusProject} from '../index';
 import path from 'path';
 import fs from 'fs-extra';

packages/docusaurus-plugin-content-blog/src/__tests__/feed.test.ts

@@ -5,6 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+import {jest} from '@jest/globals';
 import path from 'path';
 import fs from 'fs-extra';
 import {createBlogFeedFiles} from '../feed';

packages/docusaurus-plugin-content-blog/src/__tests__/index.test.ts

@@ -5,6 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+import {jest} from '@jest/globals';
 import path from 'path';
 import pluginContentBlog from '../index';
 import type {DocusaurusConfig, LoadContext, I18n} from '@docusaurus/types';

packages/docusaurus-plugin-content-blog/src/__tests__/linkify.test.ts

@@ -5,6 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+import {jest} from '@jest/globals';
 import fs from 'fs-extra';
 import path from 'path';
 import {linkify, type LinkifyParams, getSourceToPermalink} from '../blogUtils';

packages/docusaurus-plugin-content-docs/src/__tests__/cli.test.ts

@@ -5,6 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+import {jest} from '@jest/globals';
 import path from 'path';
 import {cliDocsVersionCommand} from '../cli';
 import type {

packages/docusaurus-plugin-content-docs/src/__tests__/docs.test.ts

@@ -5,6 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+import {jest} from '@jest/globals';
 import path from 'path';
 import {loadContext} from '@docusaurus/core/src/server/index';
 import {

packages/docusaurus-plugin-content-docs/src/__tests__/index.test.ts

@@ -5,6 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+import {jest} from '@jest/globals';
 import path from 'path';
 import {isMatch} from 'picomatch';
 import commander from 'commander';
@@ -29,7 +30,7 @@ import type {
 } from '../sidebars/types';
 import {toSidebarsProp} from '../props';
 
-import {validate} from 'webpack';
+import webpack from 'webpack';
 import {DefaultSidebarItemsGenerator} from '../sidebars/generator';
 import {DisabledSidebars} from '../sidebars';
 
@@ -311,7 +312,7 @@ describe('simple website', () => {
       undefined,
       content,
     );
-    const errors = validate(config);
+    const errors = webpack.validate(config);
     expect(errors).toBeUndefined();
   });
 

packages/docusaurus-plugin-content-docs/src/__tests__/lastUpdate.test.ts

@@ -5,6 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+import {jest} from '@jest/globals';
 import fs from 'fs-extra';
 import path from 'path';
 import shell from 'shelljs';

packages/docusaurus-plugin-content-docs/src/__tests__/versions.test.ts

@@ -5,6 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+import {jest} from '@jest/globals';
 import path from 'path';
 import {
   getVersionsFilePath,

packages/docusaurus-plugin-content-docs/src/markdown/__tests__/linkify.test.ts

@@ -5,6 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+import {jest} from '@jest/globals';
 import fs from 'fs-extra';
 import path from 'path';
 import {linkify} from '../linkify';

packages/docusaurus-plugin-content-docs/src/sidebars/__tests__/generator.test.ts

@@ -5,6 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+import {jest} from '@jest/globals';
 import {DefaultSidebarItemsGenerator} from '../generator';
 import type {SidebarItemsGenerator} from '../types';
 import {DefaultNumberPrefixParser} from '../../numberPrefix';

packages/docusaurus-plugin-content-docs/src/sidebars/__tests__/processor.test.ts

@@ -5,6 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+import {jest} from '@jest/globals';
 import {processSidebars} from '../processor';
 import type {
   SidebarItem,

packages/docusaurus-theme-classic/src/theme/MDXComponents/index.tsx

@@ -6,8 +6,8 @@
  */
 
 import React, {
-  type ComponentProps,
   isValidElement,
+  type ComponentProps,
   type ReactElement,
 } from 'react';
 import Head from '@docusaurus/Head';
@@ -52,7 +52,7 @@ const MDXComponents: MDXComponentsObject = {
     const shouldBeInline = React.Children.toArray(props.children).every(
       (el) =>
         (typeof el === 'string' && !el.includes('\n')) ||
-        (React.isValidElement(el) && inlineElements.includes(el.props.mdxType)),
+        (isValidElement(el) && inlineElements.includes(el.props.mdxType)),
     );
 
     return shouldBeInline ? <code {...props} /> : <CodeBlock {...props} />;

packages/docusaurus-theme-classic/src/theme/Tabs/index.tsx

@@ -8,7 +8,6 @@
 import React, {
   useState,
   cloneElement,
-  Children,
   isValidElement,
   type ReactElement,
 } from 'react';
@@ -40,7 +39,7 @@ function TabsComponent(props: Props): JSX.Element {
     groupId,
     className,
   } = props;
-  const children = Children.map(props.children, (child) => {
+  const children = React.Children.map(props.children, (child) => {
     if (isValidElement(child) && isTabItem(child)) {
       return child;
     }

packages/docusaurus-theme-common/src/components/Collapsible/index.tsx

@@ -11,11 +11,11 @@ import React, {
   useEffect,
   useRef,
   useCallback,
+  useLayoutEffect,
   type RefObject,
   type Dispatch,
   type SetStateAction,
   type ReactNode,
-  useLayoutEffect,
 } from 'react';
 
 const DefaultAnimationEasing = 'ease-in-out';

packages/docusaurus-theme-common/src/components/Details/index.tsx

@@ -6,10 +6,10 @@
  */
 
 import React, {
-  type ComponentProps,
-  type ReactElement,
   useRef,
   useState,
+  type ComponentProps,
+  type ReactElement,
 } from 'react';
 import useIsBrowser from '@docusaurus/useIsBrowser';
 import clsx from 'clsx';

packages/docusaurus-theme-common/src/utils/announcementBarUtils.tsx

@@ -10,9 +10,8 @@ import React, {
   useEffect,
   useCallback,
   useMemo,
-  type ReactNode,
   useContext,
-  createContext,
+  type ReactNode,
 } from 'react';
 import useIsBrowser from '@docusaurus/useIsBrowser';
 import {createStorageSlot} from './storageUtils';
@@ -96,7 +95,9 @@ const useAnnouncementBarContextValue = (): AnnouncementBarAPI => {
   );
 };
 
-const AnnouncementBarContext = createContext<AnnouncementBarAPI | null>(null);
+const AnnouncementBarContext = React.createContext<AnnouncementBarAPI | null>(
+  null,
+);
 
 export function AnnouncementBarProvider({
   children,

packages/docusaurus-theme-common/src/utils/colorModeUtils.tsx

@@ -11,6 +11,7 @@ import React, {
   useEffect,
   useContext,
   useMemo,
+  useRef,
   type ReactNode,
 } from 'react';
 import {ReactContextError} from './reactUtils';
@@ -96,7 +97,7 @@ function useColorModeContextValue(): ColorModeContextValue {
   // be reset to dark when exiting print mode, disregarding user settings. When
   // the listener fires only because of a print/screen switch, we don't change
   // color mode. See https://github.com/facebook/docusaurus/pull/6490
-  const previousMediaIsPrint = React.useRef(false);
+  const previousMediaIsPrint = useRef(false);
 
   useEffect(() => {
     if (disableSwitch && !respectPrefersColorScheme) {

packages/docusaurus-theme-common/src/utils/docsPreferredVersion/DocsPreferredVersionProvider.tsx

@@ -6,12 +6,11 @@
  */
 
 import React, {
-  createContext,
-  type ReactNode,
   useContext,
   useEffect,
   useMemo,
   useState,
+  type ReactNode,
 } from 'react';
 import {useThemeConfig, type DocsVersionPersistence} from '../useThemeConfig';
 import {isDocsPluginEnabled} from '../docsUtils';
@@ -131,7 +130,9 @@ function useContextValue() {
 
 type DocsPreferredVersionContextValue = ReturnType<typeof useContextValue>;
 
-const Context = createContext<DocsPreferredVersionContextValue | null>(null);
+const Context = React.createContext<DocsPreferredVersionContextValue | null>(
+  null,
+);
 
 export function DocsPreferredVersionContextProvider({
   children,

packages/docusaurus-theme-common/src/utils/docsUtils.tsx

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React, {createContext, type ReactNode, useContext} from 'react';
+import React, {type ReactNode, useContext} from 'react';
 import {
   useActivePlugin,
   useAllDocsData,
@@ -29,7 +29,7 @@ export const isDocsPluginEnabled: boolean = !!useAllDocsData;
 // Inspired by https://github.com/jamiebuilds/unstated-next/blob/master/src/unstated-next.tsx
 const EmptyContextValue: unique symbol = Symbol('EmptyContext');
 
-const DocsVersionContext = createContext<
+const DocsVersionContext = React.createContext<
   PropVersionMetadata | typeof EmptyContextValue
 >(EmptyContextValue);
 
@@ -69,7 +69,7 @@ export function useDocById(id: string | undefined): PropVersionDoc | undefined {
   return doc;
 }
 
-const DocsSidebarContext = createContext<
+const DocsSidebarContext = React.createContext<
   PropSidebar | null | typeof EmptyContextValue
 >(EmptyContextValue);
 

packages/docusaurus-theme-common/src/utils/mobileSecondaryMenu.tsx

@@ -7,12 +7,11 @@
 
 import React, {
   useState,
-  type ReactNode,
   useContext,
-  createContext,
   useEffect,
-  type ComponentType,
   useMemo,
+  type ReactNode,
+  type ComponentType,
 } from 'react';
 import {ReactContextError} from './reactUtils';
 
@@ -46,7 +45,7 @@ function useContextValue() {
 
 type ContextValue = ReturnType<typeof useContextValue>;
 
-const Context = createContext<ContextValue | null>(null);
+const Context = React.createContext<ContextValue | null>(null);
 
 export function MobileSecondaryMenuProvider({
   children,

packages/docusaurus-theme-common/src/utils/scrollUtils.tsx

@@ -6,14 +6,13 @@
  */
 
 import React, {
-  createContext,
-  type ReactNode,
   useCallback,
   useContext,
   useEffect,
   useLayoutEffect,
   useMemo,
   useRef,
+  type ReactNode,
 } from 'react';
 import {useDynamicCallback, ReactContextError} from './reactUtils';
 import ExecutionEnvironment from '@docusaurus/ExecutionEnvironment';
@@ -57,7 +56,7 @@ function useScrollControllerContextValue(): ScrollController {
   );
 }
 
-const ScrollMonitorContext = createContext<ScrollController | undefined>(
+const ScrollMonitorContext = React.createContext<ScrollController | undefined>(
   undefined,
 );