chore: remove __DEV__ with ts-jest (#1598)

* wip: use ts-jest instead of swc/jest

* use esm in jest

* remove types/jest

* remove __DEV__

* fix rollup config

* fix github workflow

* hack jest.Mock

* wip: ts

* skipLibCheck for older ts 2

* wip: ts

* wip: workflow...

* wip: workflow...

* wip: workflow...

* experiment...

* experiment...2

* experiment...3

* experiment...4

* jest preset

.eslintrc.json

@@ -113,12 +113,6 @@
         "project": "./tsconfig.json"
       }
     },
-    {
-      "files": ["tests/**/*.tsx"],
-      "env": {
-        "jest/globals": true
-      }
-    },
     {
       "files": ["./*.js"],
       "rules": {

.github/workflows/test-multiple-builds.yml

@@ -30,11 +30,13 @@ jobs:
       - name: Patch for DEV-ONLY
         if: ${{ matrix.env == 'development' }}
         run: |
-          sed -i~ "s/it[a-zA-Z]*('\[PRD-ONLY\]/it.skip('/" tests/*.tsx
+          sed -i~ "s/it[.a-zA-Z]*('\[DEV-ONLY\]/it('/" tests/*.tsx
+          sed -i~ "s/it[.a-zA-Z]*('\[PRD-ONLY\]/it.skip('/" tests/*.tsx
       - name: Patch for PRD-ONLY
         if: ${{ matrix.env == 'production' }}
         run: |
-          sed -i~ "s/it[a-zA-Z]*('\[DEV-ONLY\]/it.skip('/" tests/*.tsx
+          sed -i~ "s/it[.a-zA-Z]*('\[PRD-ONLY\]/it('/" tests/*.tsx
+          sed -i~ "s/it[.a-zA-Z]*('\[DEV-ONLY\]/it.skip('/" tests/*.tsx
       - name: Patch for CJS
         if: ${{ matrix.build == 'cjs' }}
         run: |
@@ -50,12 +52,12 @@ jobs:
         if: ${{ matrix.build == 'umd' || matrix.build == 'system' }}
         run: |
           sed -i~ "s/<rootDir>\/src\(.*\)\.ts/<rootDir>\/dist\/${BUILD}\1.${NODE_ENV}.js/" package.json
+          sed -i~ 's/"test:ci":.*,$/"test:ci": "jest",/' package.json
         env:
           BUILD: ${{ matrix.build }}
           NODE_ENV: ${{ matrix.env }}
       - name: Test ${{ matrix.build }} ${{ matrix.env }}
         run: |
-          cat package.json
           yarn test:ci
         env:
           NODE_ENV: ${{ matrix.env }}

.github/workflows/test-multiple-versions.yml

@@ -50,8 +50,9 @@ jobs:
         if: ${{ startsWith(matrix.react, '16.') }}
         run: |
           sed -i~ '1s/^/import React from "react";/' tests/*.tsx
-          sed -i~ 's/automatic/classic/' babel.config.js
-          sed -i~ 's/automatic/classic/' .swcrc
+          sed -i~ 's/"jsx": "react-jsx"/"jsx": "react"/' tsconfig.json
+          sed -i~ 's/import\.meta\.env[?]\.MODE/"DEVELOPMENT".toLowerCase()/' src/*.ts src/*/*.ts
+          sed -i~ 's/"test:ci":.*,$/"test:ci": "jest",/' package.json
       - name: Test ${{ matrix.react }}
         run: |
           yarn add -D react@${{ matrix.react }} react-dom@${{ matrix.react }}

.github/workflows/test-old-typescript.yml

@@ -32,18 +32,14 @@ jobs:
       - run: yarn build
       - name: Patch for Old TS
         run: |
-          sed -i~ "s/\/\/ @ts-expect-error.*\[LATEST-TS-ONLY\]//" tests/*.tsx
-          sed -i~ "s/\"exactOptionalPropertyTypes\": true,//" tsconfig.json
-          sed -i~ "s/\"zustand\": \[\"\.\/src\/index\.ts\"\],/\"zustand\": [\".\/dist\/index.d.ts\"],/" tsconfig.json
-          sed -i~ "s/\"zustand\/\*\": \[\"\.\/src\/\*\.ts\"\]/\"zustand\/*\": [\".\/dist\/*.d.ts\"]/" tsconfig.json
-          sed -i~ "s/\"include\": .*/\"include\": [\"src\/types.d.ts\", \"dist\/**\/*\", \"tests\/**\/*\"],/" tsconfig.json
-      - name: Patch for Older TS
-        if: ${{ matrix.typescript == '4.2.3' || matrix.typescript == '4.1.5' }}
-        run: |
-          yarn json -I -f package.json -e "this.resolutions['@types/jest']='29.2.0';"
-          yarn add -D @types/jest@29.2.0
+          sed -i~ 's/\/\/ @ts-expect-error.*\[LATEST-TS-ONLY\]//' tests/*.tsx
+          sed -i~ 's/"target":/"skipLibCheck":true,"target":/' tsconfig.json
+          sed -i~ 's/"exactOptionalPropertyTypes": true,//' tsconfig.json
+          sed -i~ 's/"zustand": \["\.\/src\/index\.ts"\],/"zustand": [".\/dist\/index.d.ts"],/' tsconfig.json
+          sed -i~ 's/"zustand\/\*": \["\.\/src\/\*\.ts"\]/"zustand\/*": [".\/dist\/*.d.ts"]/' tsconfig.json
+          sed -i~ 's/"include": .*/"include": ["src\/types.d.ts", "dist\/**\/*", "tests\/**\/*"],/' tsconfig.json
       - name: Test ${{ matrix.typescript }}
         run: |
           yarn add -D typescript@${{ matrix.typescript }}
-          rm -r node_modules/@types/jsdom node_modules/parse5 node_modules/@types/prettier
+          rm -r node_modules/parse5
           yarn tsc --noEmit

package.json

@@ -91,10 +91,10 @@
     "eslint": "eslint --fix '*.{js,json}' '{src,tests}/**/*.{ts,tsx}'",
     "eslint:ci": "eslint '*.{js,json}' '{src,tests}/**/*.{ts,tsx}'",
     "pretest": "tsc --noEmit",
-    "test": "jest",
-    "test:ci": "jest",
-    "test:dev": "jest --watch --no-coverage",
-    "test:coverage:watch": "jest --watch",
+    "test": "yarn node --experimental-vm-modules $(yarn bin jest)",
+    "test:ci": "yarn node --experimental-vm-modules $(yarn bin jest)",
+    "test:dev": "yarn node --experimental-vm-modules $(yarn bin jest) --watch --no-coverage",
+    "test:coverage:watch": "yarn node --experimental-vm-modules $(yarn bin jest) --watch",
     "copy": "shx cp -r dist/src/* dist/esm && shx cp -r dist/src/* dist && shx rm -rf dist/src && shx rm -rf dist/{src,tests} && downlevel-dts dist dist/ts3.4 && shx cp package.json readme.md LICENSE dist && json -I -f dist/package.json -e \"this.private=false; this.devDependencies=undefined; this.optionalDependencies=undefined; this.scripts=undefined; this.prettier=undefined; this.jest=undefined;\"",
     "patch-esm-ts": "node -e \"require('shelljs').find('dist/esm/**/*.d.ts').forEach(f=>{var f2=f.replace(/\\.ts$/,'.mts');require('fs').copyFileSync(f,f2);require('shelljs').sed('-i',/ from '(\\.[^']+)';$/,' from \\'\\$1.mjs\\';',f2);require('shelljs').sed('-i',/^declare module '(\\.[^']+)'/,'declare module \\'\\$1.mjs\\'',f2)})\""
   },
@@ -134,14 +134,19 @@
   "jest": {
     "rootDir": ".",
     "testEnvironment": "jsdom",
+    "preset": "ts-jest/presets/default-esm",
     "transform": {
       "^.+\\.(t|j)sx?$": [
-        "@swc/jest"
+        "ts-jest",
+        {
+          "useESM": true
+        }
       ]
     },
-    "globals": {
-      "__DEV__": true
-    },
+    "extensionsToTreatAsEsm": [
+      ".ts",
+      ".tsx"
+    ],
     "moduleNameMapper": {
       "^zustand$": "<rootDir>/src/index.ts",
       "^zustand/(.*)$": "<rootDir>/src/$1.ts"
@@ -180,10 +185,7 @@
     "@rollup/plugin-replace": "^5.0.2",
     "@rollup/plugin-terser": "^0.3.0",
     "@rollup/plugin-typescript": "^11.0.0",
-    "@swc/core": "^1.3.26",
-    "@swc/jest": "^0.2.24",
     "@testing-library/react": "^13.4.0",
-    "@types/jest": "^29.2.5",
     "@types/react": "^18.0.26",
     "@types/react-dom": "^18.0.10",
     "@types/use-sync-external-store": "^0.0.3",
@@ -211,11 +213,9 @@
     "rollup": "^3.10.0",
     "rollup-plugin-esbuild": "^5.0.0",
     "shx": "^0.3.4",
+    "ts-jest": "^29.0.5",
     "typescript": "^4.9.4"
   },
-  "resolutions": {
-    "date-fns": "2.27.0"
-  },
   "peerDependencies": {
     "immer": ">=9.0",
     "react": ">=16.8"

rollup.config.js

@@ -62,12 +62,15 @@ function createESMConfig(input, output) {
       }),
       resolve({ extensions }),
       replace({
-        __DEV__: output.endsWith('.mjs')
-          ? '((import.meta.env&&import.meta.env.MODE)!=="production")'
-          : '(process.env.NODE_ENV!=="production")',
+        ...(output.endsWith('.js')
+          ? {
+              'import.meta.env?.MODE': 'process.env.NODE_ENV',
+            }
+          : {}),
         // a workround for #829
         'use-sync-external-store/shim/with-selector':
           'use-sync-external-store/shim/with-selector.js',
+        delimiters: ['\\b', '\\b(?!(\\.|/))'],
         preventAssignment: true,
       }),
       getEsbuild('node12'),
@@ -95,7 +98,8 @@ function createCommonJSConfig(input, output, options) {
       }),
       resolve({ extensions }),
       replace({
-        __DEV__: '(process.env.NODE_ENV!=="production")',
+        'import.meta.env?.MODE': 'process.env.NODE_ENV',
+        delimiters: ['\\b', '\\b(?!(\\.|/))'],
         preventAssignment: true,
       }),
       babelPlugin(getBabelOptions({ ie: 11 })),
@@ -131,7 +135,8 @@ function createUMDConfig(input, output, env) {
       }),
       resolve({ extensions }),
       replace({
-        __DEV__: env !== 'production' ? 'true' : 'false',
+        'import.meta.env?.MODE': JSON.stringify(env),
+        delimiters: ['\\b', '\\b(?!(\\.|/))'],
         preventAssignment: true,
       }),
       babelPlugin(getBabelOptions({ ie: 11 })),
@@ -156,7 +161,8 @@ function createSystemConfig(input, output, env) {
       }),
       resolve({ extensions }),
       replace({
-        __DEV__: env !== 'production' ? 'true' : 'false',
+        'import.meta.env?.MODE': JSON.stringify(env),
+        delimiters: ['\\b', '\\b(?!(\\.|/))'],
         preventAssignment: true,
       }),
       getEsbuild('node12', env),

src/context.ts

@@ -25,7 +25,7 @@ type WithoutCallSignature<T> = { [K in keyof T]: T[K] }
  * @deprecated Use `createStore` and `useStore` for context usage
  */
 function createContext<S extends StoreApi<unknown>>() {
-  if (__DEV__) {
+  if (import.meta.env?.MODE !== 'production') {
     console.warn(
       "[DEPRECATED] `context` will be removed in a future version. Instead use `import { createStore, useStore } from 'zustand'`. See: https://github.com/pmndrs/zustand/discussions/1180."
     )

src/middleware/devtools.ts

@@ -210,13 +210,14 @@ const devtoolsImpl: DevtoolsImpl =
       | false
     try {
       extensionConnector =
-        (enabled ?? __DEV__) && window.__REDUX_DEVTOOLS_EXTENSION__
+        (enabled ?? import.meta.env?.MODE !== 'production') &&
+        window.__REDUX_DEVTOOLS_EXTENSION__
     } catch (e) {
       // ignored
     }
 
     if (!extensionConnector) {
-      if (__DEV__ && enabled) {
+      if (import.meta.env?.MODE !== 'production' && enabled) {
         console.warn(
           '[zustand devtools middleware] Please install/enable Redux devtools extension'
         )
@@ -286,7 +287,7 @@ const devtoolsImpl: DevtoolsImpl =
       const originalDispatch = (api as any).dispatch
       ;(api as any).dispatch = (...a: any[]) => {
         if (
-          __DEV__ &&
+          import.meta.env?.MODE !== 'production' &&
           a[0].type === '__setState' &&
           !didWarnAboutReservedActionType
         ) {

src/middleware/persist.ts

@@ -502,7 +502,7 @@ const persistImpl: PersistImpl = (config, baseOptions) => {
     'serialize' in baseOptions ||
     'deserialize' in baseOptions
   ) {
-    if (__DEV__) {
+    if (import.meta.env?.MODE !== 'production') {
       console.warn(
         '[DEPRECATED] `getStorage`, `serialize` and `deserialize` options are deprecated. Use `storage` option instead.'
       )

src/react.ts

@@ -68,7 +68,10 @@ type Create = {
 }
 
 const createImpl = <T>(createState: StateCreator<T, [], []>) => {
-  if (__DEV__ && typeof createState !== 'function') {
+  if (
+    import.meta.env?.MODE !== 'production' &&
+    typeof createState !== 'function'
+  ) {
     console.warn(
       "[DEPRECATED] Passing a vanilla store will be unsupported in a future version. Instead use `import { useStore } from 'zustand'`."
     )
@@ -91,7 +94,7 @@ export const create = (<T>(createState: StateCreator<T, [], []> | undefined) =>
  * @deprecated Use `import { create } from 'zustand'`
  */
 export default ((createState: any) => {
-  if (__DEV__) {
+  if (import.meta.env?.MODE !== 'production') {
     console.warn(
       "[DEPRECATED] Default export is deprecated. Instead use `import { create } from 'zustand'`."
     )

src/shallow.ts

@@ -52,7 +52,7 @@ export function shallow<T>(objA: T, objB: T) {
  * @deprecated Use `import { shallow } from 'zustand/shallow'`
  */
 export default ((objA, objB) => {
-  if (__DEV__) {
+  if (import.meta.env?.MODE !== 'production') {
     console.warn(
       "[DEPRECATED] Default export is deprecated. Instead use `import { create } from 'zustand/shallow'`."
     )

src/types.d.ts

@@ -1,2 +1,5 @@
-// eslint-disable-next-line no-var
-declare var __DEV__: boolean
+declare interface ImportMeta {
+  env?: {
+    MODE: string
+  }
+}

src/vanilla.ts

@@ -89,7 +89,7 @@ const createStoreImpl: CreateStoreImpl = (createState) => {
   }
 
   const destroy: StoreApi<TState>['destroy'] = () => {
-    if (__DEV__) {
+    if (import.meta.env?.MODE !== 'production') {
       console.warn(
         '[DEPRECATED] The `destroy` method will be unsupported in a future version. Instead use unsubscribe function returned by subscribe. Everything will be garbage-collected if store is garbage-collected.'
       )
@@ -109,7 +109,7 @@ export const createStore = ((createState) =>
  * @deprecated Use `import { createStore } from 'zustand/vanilla'`
  */
 export default ((createState) => {
-  if (__DEV__) {
+  if (import.meta.env?.MODE !== 'production') {
     console.warn(
       "[DEPRECATED] Default export is deprecated. Instead use import { createStore } from 'zustand/vanilla'."
     )

tests/basic.test.tsx

@@ -6,6 +6,7 @@ import {
   useLayoutEffect,
   useState,
 } from 'react'
+import { afterEach, expect, it, jest } from '@jest/globals'
 import { act, fireEvent, render } from '@testing-library/react'
 import ReactDOM from 'react-dom'
 import { create } from 'zustand'

tests/context.test.tsx

@@ -6,6 +6,7 @@ import {
   useEffect,
   useState,
 } from 'react'
+import { afterEach, it, jest } from '@jest/globals'
 import { render } from '@testing-library/react'
 import { create } from 'zustand'
 import type { StoreApi } from 'zustand'