Merge pull request #2321 from system-ui/jest-29

Upgrade to Jest 29

jest.config.js

@@ -4,14 +4,21 @@
 /** @type {import('@jest/types').Config.InitialOptions} */
 const config = {
   preset: 'ts-jest/presets/js-with-ts',
-  globals: {
-    'ts-jest': {
-      tsconfig: './tsconfig.test.json',
-      useESM: true,
-      diagnostics: {
-        exclude: ['**'],
+  transform: {
+    '^.+.tsx?$': [
+      'ts-jest',
+      {
+        isolatedModules: true,
+        tsconfig: {
+          tsconfig: './tsconfig.test.json',
+          useESM: true,
+          diagnostics: {
+            exclude: ['**'],
+          },
+        },
       },
-    },
+    ],
+    '^.+\\.m?jsx?$': '<rootDir>/jest-preprocess.js',
   },
   testMatch: ['**/packages/**/test/*.{js,ts,tsx,mjs}'],
   testPathIgnorePatterns: [
@@ -47,9 +54,6 @@ const config = {
   modulePathIgnorePatterns: ['packages/.*/dist'],
   snapshotSerializers: ['@emotion/jest/serializer'],
   setupFiles: ['jest-canvas-mock'],
-  transform: {
-    '^.+\\.m?jsx?$': '<rootDir>/jest-preprocess.js',
-  },
   moduleNameMapper: {
     '@theme-ui/css/dist/types': '@theme-ui/css/src/types',
   },

package.json

@@ -42,14 +42,14 @@
     "node": ">=16.0.0"
   },
   "devDependencies": {
-    "@auto-it/all-contributors": "^10.32.3",
-    "@auto-it/conventional-commits": "^10.32.3",
-    "@auto-it/core": "^10.37.4",
-    "@auto-it/first-time-contributor": "^10.32.3",
-    "@auto-it/magic-zero": "^10.32.3",
-    "@auto-it/npm": "^10.37.4",
-    "@auto-it/omit-commits": "^10.32.3",
-    "@auto-it/released": "^10.32.3",
+    "@auto-it/all-contributors": "^10.37.6",
+    "@auto-it/conventional-commits": "^10.37.6",
+    "@auto-it/core": "^10.37.6",
+    "@auto-it/first-time-contributor": "^10.37.6",
+    "@auto-it/magic-zero": "^10.37.6",
+    "@auto-it/npm": "^10.37.6",
+    "@auto-it/omit-commits": "^10.37.6",
+    "@auto-it/released": "^10.37.6",
     "@babel/cli": "^7.13.14",
     "@babel/core": "^7.15.8",
     "@babel/helper-string-parser": "^7.18.10",
@@ -61,34 +61,34 @@
     "@babel/runtime": "^7.16.3",
     "@codechecks/build-size-watcher": "^0.1.0",
     "@codechecks/client": "0.1.10-beta",
-    "@emotion/jest": "^11.6.0",
-    "@jest/types": "^28",
+    "@emotion/jest": "^11.10.0",
+    "@jest/types": "^29",
     "@preconstruct/cli": "^2.1.5",
-    "@testing-library/react": "^13.0.0",
+    "@testing-library/react": "^13.4.0",
     "@types/eslint": "8.4.6",
-    "@types/jest": "^28.1.6",
-    "@types/node": "^18.6.4",
+    "@types/jest": "^29.0.3",
+    "@types/node": "^18.7.18",
     "@types/react-dom": "^18.0.6",
     "@types/react-test-renderer": "^18.0.0",
-    "@typescript-eslint/eslint-plugin": "^5.32.0",
-    "@typescript-eslint/parser": "^5.32.0",
-    "auto": "^10.32.3",
-    "babel-jest": "^28.0.3",
+    "@typescript-eslint/eslint-plugin": "^5.37.0",
+    "@typescript-eslint/parser": "^5.37.0",
+    "auto": "^10.37.6",
+    "babel-jest": "^29.0.3",
     "babel-preset-gatsby": "^2.2.0",
     "cross-env": "^7.0.3",
     "egzek": "^1.2.0",
     "eslint": "^8",
     "eslint-config-react-app": "^7.0.1",
-    "jest": "^28.0.3",
+    "jest": "^29.0.3",
     "jest-canvas-mock": "^2.4.0",
     "jest-environment-jsdom": "^29.0.3",
     "jest-mock-console": "^2.0.0",
     "jest-ts-webcompat-resolver": "^1.0.0",
     "postinstall-postinstall": "^2.1.0",
     "prettier": "^2.2.1",
-    "react-test-renderer": "^18.0.0",
+    "react-test-renderer": "^18.2.0",
     "rimraf": "^3.0.2",
-    "ts-jest": "^28.0.7",
+    "ts-jest": "^29.0.1",
     "ts-toolbelt": "^9.6.0",
     "typecov": "^0.2.3",
     "typescript": "^4"
@@ -107,7 +107,8 @@
       "allowedVersions": {
         "react": "18",
         "eslint": "8",
-        "gatsby": "4"
+        "gatsby": "4",
+        "@types/jest": "29"
       }
     }
   },

packages/color-modes/test/__snapshots__/index.tsx.snap

@@ -3,7 +3,7 @@
 exports[`InitializeColorMode renders 1`] = `
 <script
   dangerouslySetInnerHTML={
-    Object {
+    {
       "__html": "(function() { try {
   var mode = localStorage.getItem('theme-ui-color-mode');
   if (!mode) return

packages/color-modes/test/index.tsx

@@ -912,7 +912,7 @@ test('warns when localStorage is disabled', () => {
   const localStorage = window.localStorage
   Object.defineProperty(window, 'localStorage', {
     get: jest.fn(() => {
-      throw 'SecurityError: The operation is insecure.'
+      throw new Error('SecurityError: The operation is insecure.')
     }),
   })
 
@@ -936,10 +936,10 @@ test('warns when localStorage is disabled', () => {
   Object.defineProperty(window, 'localStorage', { value: localStorage })
 
   expect((console.warn as jest.Mock).mock.calls[0]).toMatchInlineSnapshot(`
-    Array [
+    [
       "localStorage is disabled and color mode might not work as expected.",
       "Please check your Site Settings.",
-      "SecurityError: The operation is insecure.",
+      [Error: SecurityError: The operation is insecure.],
     ]
   `)
 

packages/core/test/index.tsx

@@ -167,8 +167,8 @@ describe('jsx', () => {
           },
         },
         jsx('div', {
-          css: (t) => ({
-            color: t.colors.primary,
+          css: (t: Theme) => ({
+            color: t.colors?.primary,
           }),
         })
       )

packages/custom-properties/test/__snapshots__/test.mjs.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`transforms a theme config to CSS custom properties 1`] = `
-Object {
+{
   "--color-accent": "#609",
   "--color-background": "#fff",
   "--color-dark-background-surface": "#fff",
@@ -10,8 +10,8 @@ Object {
   "--color-primary": "#07c",
   "--color-secondary": "#05a",
   "--color-text": "#000",
-  "--font-body": "system-ui, -apple-system, BlinkMacSystemFont, \\"Segoe UI\\", Roboto, \\"Helvetica Neue\\", sans-serif",
-  "--font-heading": "system-ui, -apple-system, BlinkMacSystemFont, \\"Segoe UI\\", Roboto, \\"Helvetica Neue\\", sans-serif",
+  "--font-body": "system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif",
+  "--font-heading": "system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif",
   "--font-monospace": "Menlo, monospace",
   "--fontWeight-body": 400,
   "--fontWeight-bold": 700,
@@ -32,7 +32,7 @@ Object {
 `;
 
 exports[`transforms a theme config to CSS custom properties with prefix 1`] = `
-Object {
+{
   "--🍭-color-accent": "#609",
   "--🍭-color-background": "#fff",
   "--🍭-color-dark-background-surface": "#fff",
@@ -41,8 +41,8 @@ Object {
   "--🍭-color-primary": "#07c",
   "--🍭-color-secondary": "#05a",
   "--🍭-color-text": "#000",
-  "--🍭-font-body": "system-ui, -apple-system, BlinkMacSystemFont, \\"Segoe UI\\", Roboto, \\"Helvetica Neue\\", sans-serif",
-  "--🍭-font-heading": "system-ui, -apple-system, BlinkMacSystemFont, \\"Segoe UI\\", Roboto, \\"Helvetica Neue\\", sans-serif",
+  "--🍭-font-body": "system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif",
+  "--🍭-font-heading": "system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif",
   "--🍭-font-monospace": "Menlo, monospace",
   "--🍭-fontWeight-body": 400,
   "--🍭-fontWeight-bold": 700,

packages/match-media/test/ssr.tsx

@@ -1,14 +1,14 @@
 /**
  * @jest-environment node
+ * @jsx jsx
  */
-/**@jsx jsx */
 import { jsx, ThemeProvider } from 'theme-ui'
 import { Fragment } from 'react'
 import ReactDOMServer from 'react-dom/server'
 import { useResponsiveValue, useBreakpointIndex } from '../src'
 
 test("falls back to user's default index", () => {
-  const Component = (props) => {
+  const Component = () => {
     const value = useResponsiveValue(['a', 'b'], { defaultIndex: 1 })
     const index = useBreakpointIndex({ defaultIndex: 2 })
     return (
@@ -26,7 +26,7 @@ test("falls back to user's default index", () => {
 test('defaults to first breakpoint without user input', () => {
   let value
   let index
-  const Component = (props) => {
+  const Component = () => {
     value = useResponsiveValue(['a', 'b'])
     index = useBreakpointIndex()
     return null
@@ -38,31 +38,40 @@ test('defaults to first breakpoint without user input', () => {
 })
 
 test('requires default index be in range', () => {
-  const Component = (props) => {
+  const Component = () => {
     const value = useResponsiveValue(['a', 'b'], { defaultIndex: 4 })
     const index = useBreakpointIndex({ defaultIndex: 4 })
-    return null
+    return (
+      <Fragment>
+        {value} {index}
+      </Fragment>
+    )
   }
   const Example = () =>
     ReactDOMServer.renderToStaticMarkup(
       <ThemeProvider
         theme={{
           breakpoints: ['30em', '45em', '55em'],
-        }}>
+        }}
+      >
         <Component />
       </ThemeProvider>
     )
   expect(Example).toThrowError(RangeError)
 })
 
 test('requires default index be a number', () => {
-  const Component = ({ index }) => {
+  const Component = ({ index }: { index: number }) => {
     const value = useResponsiveValue(['a', 'b'], { defaultIndex: index })
     const themeIndex = useBreakpointIndex({ defaultIndex: index })
-    return null
+    return (
+      <Fragment>
+        {value} {themeIndex}
+      </Fragment>
+    )
   }
 
-  const createRender = (defaultIndex) => () =>
+  const createRender = (defaultIndex: any) => () =>
     ReactDOMServer.renderToStaticMarkup(<Component index={defaultIndex} />)
 
   expect(createRender(() => 2)).toThrowError(TypeError)

packages/mdx/test/defaultMdxComponents.tsx

@@ -3,7 +3,7 @@ import { defaultMdxComponents } from '../src'
 describe('defaultMdxComponents', () => {
   it('has keys matching inline snapshot', () => {
     expect(Object.keys(defaultMdxComponents)).toMatchInlineSnapshot(`
-      Array [
+      [
         "p",
         "b",
         "i",

packages/prism/package.json

@@ -36,7 +36,8 @@
     "postcss": "^8.1.10",
     "postcss-js": "^3.0.3",
     "theme-ui": "workspace:^",
-    "react": "^18"
+    "react": "^18",
+    "@types/react": "^18"
   },
   "gitHead": "621199460fa3bdb0100748441e62517b7529b8c8"
 }

packages/prism/test/__snapshots__/index.tsx.snap

@@ -3,7 +3,7 @@
 exports[`highlight start and end 1`] = `
 <pre
   className="language-js prism-code language-javascript emotion-0"
-  style={Object {}}
+  style={{}}
 >
   <div
     className="token-line highlight"
@@ -89,7 +89,7 @@ exports[`highlight start and end 1`] = `
 exports[`highlights inline comment 1`] = `
 <pre
   className="language-js prism-code language-javascript emotion-0"
-  style={Object {}}
+  style={{}}
 >
   <div
     className="token-line highlight"
@@ -143,7 +143,7 @@ exports[`multiple highlights start and end 1`] = `
 
 <pre
   className="language-js prism-code language-javascript emotion-0"
-  style={Object {}}
+  style={{}}
 >
   <div
     className="token-line highlight"
@@ -263,7 +263,7 @@ exports[`multiple highlights start and end 1`] = `
 exports[`no highlight 1`] = `
 <pre
   className="language-js prism-code language-javascript emotion-0"
-  style={Object {}}
+  style={{}}
 >
   <div
     className="token-line"
@@ -310,7 +310,7 @@ exports[`no highlight 1`] = `
 exports[`renders a code block 1`] = `
 <pre
   className="language-js prism-code language-javascript emotion-0"
-  style={Object {}}
+  style={{}}
 >
   <div
     className="token-line"
@@ -352,7 +352,7 @@ exports[`renders a code block 1`] = `
 exports[`renders with no className 1`] = `
 <pre
   className=" prism-code language- emotion-0"
-  style={Object {}}
+  style={{}}
 >
   <div
     className="token-line"
@@ -369,7 +369,7 @@ exports[`renders with no className 1`] = `
 exports[`renders with other languages 1`] = `
 <pre
   className="language-php prism-code language-php emotion-0"
-  style={Object {}}
+  style={{}}
 >
   <div
     className="token-line"

packages/prism/test/index.tsx

@@ -2,15 +2,16 @@
  * @jest-environment jsdom
  */
 
-import React, { ReactElement } from 'react'
+import React from 'react'
 import renderer from 'react-test-renderer'
 import Prism from '../src'
 
 const CODE = `
   console.log('hello, world!')
 `
 
-const render = (el: ReactElement) => renderer.create(el).toJSON()
+const render = (el: typeof renderer.create.arguments[0]) =>
+  renderer.create(el).toJSON()
 
 test('renders a code block', () => {
   const result = render(<Prism className="language-js">{CODE}</Prism>)
@@ -19,6 +20,7 @@ test('renders a code block', () => {
 })
 
 test('renders with no className', () => {
+  // @ts-expect-error className is required by the type definition
   const json = render(<Prism children="<h1>Hello</h1>" />)
   expect(json).toMatchSnapshot()
 })