Convert all tests to .mjs format (nodejs#5543)

COLLABORATOR_GUIDE.md

@@ -186,6 +186,7 @@ We also use [Storybook][] to document our components. Each component should have
 
 Unit Tests are fundamental to ensure that code changes do not disrupt the functionalities of the Node.js Website:
 
+- Unit tests should be written as `.mjs` files.
 - We recommend that unit tests are added for content covering `util`, `scripts`, `hooks` and `components` whenever possible.
 - Unit Tests should cover that the functionality of a given change is working as expected.
 - When creating unit tests for React components, we recommend that the tests cover all the possible states of the component.

components/Article/Codebox/__tests__/index.test.tsx → components/Article/Codebox/__tests__/index.test.mjs

@@ -2,10 +2,7 @@ import userEvent from '@testing-library/user-event';
 import { render, screen, waitFor } from '@testing-library/react';
 import { IntlProvider } from 'react-intl';
 
-import Codebox, {
-  replaceLabelLanguages,
-  replaceLanguages,
-} from '@/components/Article/Codebox/index';
+import Codebox, { replaceLabelLanguages, replaceLanguages } from '..';
 
 describe('Codebox component', () => {
   it('should render Codebox component', async () => {
@@ -19,12 +16,12 @@ describe('Codebox component', () => {
   });
 });
 
-describe('Replacer tests', (): void => {
-  it('replaceLabelLanguages', (): void => {
+describe('Replacer tests', () => {
+  it('replaceLabelLanguages', () => {
     expect(replaceLabelLanguages('language-console')).toBe('bash');
   });
 
-  it('replaceLanguages', (): void => {
+  it('replaceLanguages', () => {
     expect(replaceLanguages('language-mjs')).toBe('language-js');
     expect(replaceLanguages('language-cjs')).toBe('language-js');
     expect(replaceLanguages('language-javascript')).toBe('language-js');
@@ -33,7 +30,7 @@ describe('Replacer tests', (): void => {
   });
 });
 
-describe('Codebox component (one lang)', (): void => {
+describe('Codebox component (one lang)', () => {
   const code = 'const a = 1;';
 
   it('should copy content', async () => {
@@ -56,7 +53,7 @@ describe('Codebox component (one lang)', (): void => {
 
     expect(buttonElement).not.toBeNull();
 
-    await user.click(buttonElement!);
+    await user.click(buttonElement);
 
     expect(navigatorClipboardWriteTextSpy).toHaveBeenCalledTimes(1);
     expect(navigatorClipboardWriteTextSpy).toHaveBeenCalledWith(code);
@@ -84,14 +81,14 @@ describe('Codebox component (one lang)', (): void => {
 
     expect(buttonElement).not.toBeNull();
 
-    await user.click(buttonElement!);
+    await user.click(buttonElement);
 
     expect(navigatorClipboardWriteTextSpy).toHaveBeenCalledTimes(1);
     expect(navigatorClipboardWriteTextSpy).toHaveBeenCalledWith(textToCopy[0]);
   });
 });
 
-describe('Codebox component (multiple langs)', (): void => {
+describe('Codebox component (multiple langs)', () => {
   const code = `const http = require('http');
 --------------
 import http from 'http';`;
@@ -142,15 +139,15 @@ import http from 'http';`;
 
     expect(copyButton).not.toBeNull();
 
-    await user.click(copyButton!);
+    await user.click(copyButton);
 
     expect(navigatorClipboardWriteTextSpy).toHaveBeenCalledTimes(1);
     expect(navigatorClipboardWriteTextSpy).toHaveBeenCalledWith(textToCopy[0]);
 
     const buttonElement = await screen.findByText('mjs');
     await user.click(buttonElement);
 
-    await user.click(copyButton!);
+    await user.click(copyButton);
 
     expect(navigatorClipboardWriteTextSpy).toHaveBeenCalledTimes(2);
     expect(navigatorClipboardWriteTextSpy).toHaveBeenCalledWith(textToCopy[1]);

components/Article/EditLink/__tests__/index.test.tsx → components/Article/EditLink/__tests__/index.test.mjs

@@ -1,6 +1,6 @@
 import { render, screen } from '@testing-library/react';
 import { IntlProvider } from 'react-intl';
-import EditLink from './../index';
+import EditLink from '../index';
 
 jest.mock('next/router', () => ({
   useRouter: jest.fn().mockImplementation(() => ({

components/Common/Banner/__tests__/index.test.tsx → components/Common/Banner/__tests__/index.test.mjs

@@ -1,9 +1,8 @@
 import { render, screen } from '@testing-library/react';
 import { IntlProvider } from 'react-intl';
-import Banner from '@/components/Common/Banner/index';
-import type { WebsiteBanner } from '@/types';
+import Banner from '..';
 
-const bannersIndex: WebsiteBanner = {
+const bannersIndex = {
   endDate: '',
   link: 'test/banner/link',
   text: 'Test banner text',

components/Common/DarkModeToggle/__tests__/index.test.tsx → components/Common/DarkModeToggle/__tests__/index.test.mjs

@@ -1,7 +1,7 @@
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { IntlProvider } from 'react-intl';
-import DarkModeToggle from '@/components/Common/DarkModeToggle/index';
+import DarkModeToggle from '..';
 
 let mockCurrentTheme = 'light';
 

components/Common/Dropdown/__tests__/index.test.tsx → components/Common/Dropdown/__tests__/index.test.mjs

@@ -1,9 +1,8 @@
 import { fireEvent, render, screen } from '@testing-library/react';
 import Dropdown from '..';
-import type { DropdownItem } from '@/types';
 
 describe('Dropdown component', () => {
-  const items: DropdownItem[] = [
+  const items = [
     { label: 'item1', title: 'Item 1', active: false, onClick: jest.fn() },
     { label: 'item2', title: 'Item 2', active: true, onClick: jest.fn() },
     { label: 'item3', title: 'Item 3', active: false, onClick: jest.fn() },

components/Downloads/DownloadToggle/__tests__/index.test.tsx → components/Downloads/DownloadToggle/__tests__/index.test.mjs

@@ -3,7 +3,7 @@ import { render, screen } from '@testing-library/react';
 import { IntlProvider } from 'react-intl';
 import DownloadToggle from '..';
 
-describe('DownloadToggle component', (): void => {
+describe('DownloadToggle component', () => {
   it('utilizes click handler correctly', async () => {
     const mockHandler = jest.fn();
 

hooks/__tests__/useClickOutside.test.tsx → hooks/__tests__/useClickOutside.test.mjs

@@ -1,11 +1,11 @@
 import { render, fireEvent, screen } from '@testing-library/react';
 import { useState } from 'react';
-import { useClickOutside } from '@/hooks/useClickOutside';
+import { useClickOutside } from '../useClickOutside';
 
 describe('useClickOutside', () => {
   const Component = () => {
     const [state, setState] = useState(false);
-    const ref = useClickOutside<HTMLDivElement>(() => setState(false));
+    const ref = useClickOutside(() => setState(false));
 
     return (
       <div>

hooks/__tests__/useCopyToClipboard.test.tsx → hooks/__tests__/useCopyToClipboard.test.mjs

@@ -1,7 +1,7 @@
 import { render, fireEvent, screen, act } from '@testing-library/react';
 import { FormattedMessage } from 'react-intl';
 import { IntlProvider } from 'react-intl';
-import { useCopyToClipboard } from '@/hooks/useCopyToClipboard';
+import { useCopyToClipboard } from '../useCopyToClipboard';
 
 const mockWriteText = jest.fn();
 const originalNavigator = { ...window.navigator };
@@ -42,7 +42,7 @@ describe('useCopyToClipboard', () => {
       },
     });
 
-    const TestComponent = ({ textToCopy }: { textToCopy: string }) => {
+    const TestComponent = ({ textToCopy }) => {
       const [copied, copyText] = useCopyToClipboard();
 
       return (

hooks/__tests__/useDetectOS.test.tsx → hooks/__tests__/useDetectOS.test.mjs

@@ -1,5 +1,5 @@
 import { renderHook, waitFor } from '@testing-library/react';
-import { useDetectOS } from '@/hooks/useDetectOS';
+import { useDetectOS } from '../useDetectOS';
 
 const windowsUserAgent =
   'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.36';

hooks/__tests__/useMediaQuery.test.tsx → hooks/__tests__/useMediaQuery.test.mjs

@@ -1,5 +1,5 @@
 import { renderHook } from '@testing-library/react';
-import { useMediaQuery } from '@/hooks/useMediaQuery';
+import { useMediaQuery } from '../useMediaQuery';
 
 describe('useMediaQuery', () => {
   it('should check for matchMedia support', () => {
@@ -39,11 +39,9 @@ describe('useMediaQuery', () => {
   });
 
   it('should subscribe for media changes', () => {
-    const listenerMock = jest
-      .fn()
-      .mockImplementation((_: any, handler: Function) => {
-        handler();
-      });
+    const listenerMock = jest.fn().mockImplementation((_, handler) => {
+      handler();
+    });
 
     Object.defineProperty(window, 'matchMedia', {
       writable: true,
@@ -60,7 +58,7 @@ describe('useMediaQuery', () => {
   });
 
   it("should support MediaQueryList's old event listeners", () => {
-    const listenerMock = jest.fn().mockImplementation((handler: Function) => {
+    const listenerMock = jest.fn().mockImplementation(handler => {
       handler();
     });
 

jest.config.mjs

@@ -9,7 +9,7 @@ const customJestConfig = {
   setupFilesAfterEnv: ['<rootDir>/jest.setup.mjs'],
   moduleDirectories: ['node_modules', '<rootDir>/'],
   testEnvironment: 'jest-environment-jsdom',
-  testMatch: ['**/__tests__/*.test.{,ts,tsx}'],
+  testMatch: ['**/__tests__/*.test.mjs'],
 };
 
 export default createJestConfig(customJestConfig);

turbo.json

@@ -163,7 +163,7 @@
     },
     "test:unit": {
       "inputs": [
-        "{app,components,hooks,i18n,layouts,middlewares,pages,providers,types,util}/**/*.{ts,tsx}",
+        "{app,components,hooks,i18n,layouts,middlewares,pages,providers,types,util}/**/*.{ts,tsx,mjs}",
         "{app,components,layouts,pages,styles}/**/*.{css,sass,scss}",
         "{next-data,scripts,i18n}/**/*.{mjs,json}",
         "{app,pages}/**/*.{mdx,md}",
@@ -172,7 +172,7 @@
     },
     "test:storybook": {
       "inputs": [
-        "{app,components,hooks,i18n,layouts,middlewares,pages,providers,types,util}/**/*.{ts,tsx}",
+        "{app,components,hooks,i18n,layouts,middlewares,pages,providers,types,util}/**/*.{ts,tsx,mjs}",
         "{app,components,layouts,pages,styles}/**/*.{css,sass,scss}",
         "{next-data,scripts,i18n}/**/*.{mjs,json}",
         "{.storybook,public}/**/*.{ts,js,css,json}",
@@ -182,7 +182,7 @@
     },
     "test": {
       "inputs": [
-        "{app,components,hooks,i18n,layouts,middlewares,pages,providers,types,util}/**/*.{ts,tsx}",
+        "{app,components,hooks,i18n,layouts,middlewares,pages,providers,types,util}/**/*.{ts,tsx,mjs}",
         "{app,components,layouts,pages,styles}/**/*.{css,sass,scss}",
         "{next-data,scripts,i18n}/**/*.{mjs,json}",
         "{.storybook,public}/**/*.{ts,js,css,json}",