Depend on babel-jest

[curtvict]

What's happening
I upgraded from Storybook 7.5 to 7.6 where they dropped some dependencies. My test suite stopped running with a complaint from craco around a missing babel-jest dependency:

Error: Cannot find module 'babel-jest'
Require stack:
- /home/runner/work/frontend/frontend/node_modules/@craco/craco/dist/lib/features/jest/create-jest-babel-transform.js
- /home/runner/work/frontend/frontend/node_modules/@craco/craco/dist/lib/features/jest/jest-babel-transform.js
- /home/runner/work/frontend/frontend/node_modules/react-scripts/node_modules/jest-util/build/requireOrImportModule.js
- /home/runner/work/frontend/frontend/node_modules/react-scripts/node_modules/jest-util/build/index.js
- /home/runner/work/frontend/frontend/node_modules/react-scripts/node_modules/jest-config/build/getCacheDirectory.js
- /home/runner/work/frontend/frontend/node_modules/react-scripts/node_modules/jest-config/build/Defaults.js
- /home/runner/work/frontend/frontend/node_modules/react-scripts/node_modules/jest-config/build/normalize.js
- /home/runner/work/frontend/frontend/node_modules/react-scripts/node_modules/jest-config/build/index.js
- /home/runner/work/frontend/frontend/node_modules/react-scripts/node_modules/jest-cli/build/init/index.js
- /home/runner/work/frontend/frontend/node_modules/react-scripts/node_modules/jest-cli/build/cli/index.js
- /home/runner/work/frontend/frontend/node_modules/react-scripts/node_modules/jest-cli/build/index.js
- /home/runner/work/frontend/frontend/node_modules/react-scripts/node_modules/jest/build/jest.js
- /home/runner/work/frontend/frontend/node_modules/react-scripts/scripts/test.js
- /home/runner/work/frontend/frontend/node_modules/@craco/craco/dist/lib/cra.js
- /home/runner/work/frontend/frontend/node_modules/@craco/craco/dist/scripts/test.js
...

Sure enough, craco depends on babel-jest:

https://github.com/dilanx/craco/blob/main/packages/craco/src/lib/features/jest/create-jest-babel-transform.ts#L3

But it's not listed in craco's package.json.

What should happen
craco should define its dependencies explicitly in it's package.

To reproduce
Unsure

CRACO version
7.1.0

CRACO config

const SentryWebpackPlugin = require('@sentry/webpack-plugin');

const webpackPlugins = [];

if (process.env.SENTRY_AUTH_TOKEN) {
  webpackPlugins.push(
    new SentryWebpackPlugin({
      org: 'OMITTED',
      project: 'OMITTED',
      include: './build',
      authToken: process.env.SENTRY_AUTH_TOKEN,
    })
  );
}

module.exports = {
  babel: {
    plugins: [
      'add-react-displayname',
      ['babel-plugin-styled-components', { ssr: false, pure: true }],
    ],
  },
  webpack: {
    devtool: 'source-map',
    plugins: webpackPlugins,
  },
  jest: {
    configure: {
      clearMocks: true,
    },
  },
};

package.json

{
  "name": "frontend",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@fontsource-variable/material-symbols-rounded": "5.0.17",
    "@fontsource/inter": "5.0.16",
    "@fontsource/montserrat": "5.0.16",
    "@fontsource/source-code-pro": "5.0.16",
    "@popperjs/core": "2.11.8",
    "@react-css/flex": "2.2.0",
    "@react-css/grid": "2.2.0",
    "@reduxjs/toolkit": "1.9.7",
    "@sentry/react": "7.86.0",
    "@storybook/addon-actions": "7.6.4",
    "@storybook/react": "7.6.4",
    "@tiptap/core": "2.1.13",
    "@tiptap/extension-underline": "2.1.13",
    "@tiptap/pm": "2.1.13",
    "@tiptap/react": "2.1.13",
    "@tiptap/starter-kit": "2.1.13",
    "@types/dompurify": "3.0.5",
    "@types/prop-types": "15.7.11",
    "@types/react-router": "5.1.20",
    "@types/remarkable": "2.0.8",
    "bootstrap": "4.6.2",
    "classnames": "2.3.2",
    "date-fns": "2.30.0",
    "date-fns-tz": "2.0.0",
    "dompurify": "3.0.6",
    "downloadjs": "1.4.7",
    "downshift": "6.1.12",
    "env-cmd": "10.1.0",
    "formik": "2.2.9",
    "hellosign-embedded": "2.11.1",
    "jquery": "3.6.4",
    "js-file-download": "0.4.12",
    "lodash": "4.17.21",
    "mutationobserver-shim": "0.3.7",
    "pdf-lib": "1.17.1",
    "popper.js": "1.16.1",
    "posthog-js": "1.94.1",
    "prop-types": "15.8.1",
    "qs": "6.11.2",
    "react": "17.0.2",
    "react-bootstrap": "1.6.7",
    "react-dom": "17.0.2",
    "react-hook-form": "7.48.2",
    "react-is": "18.2.0",
    "react-popper": "2.3.0",
    "react-query": "3.39.3",
    "react-redux": "7.2.9",
    "react-router-dom": "5.3.4",
    "react-scripts": "5.0.1",
    "react-select": "5.7.7",
    "react-sortable-hoc": "2.0.0",
    "react-string-replace": "1.1.1",
    "react-table": "7.8.0",
    "react-use-websocket": "4.3.1",
    "redux": "4.2.1",
    "redux-logger": "3.0.6",
    "remarkable": "2.0.1",
    "require-from-string": "2.0.2",
    "simplebar-react": "3.2.4",
    "styled-components": "5.3.11",
    "typescript": "4.9.5",
    "universal-cookie": "6.1.1",
    "usehooks-ts": "2.9.1",
    "uuid": "9.0.1"
  },
  "scripts": {
    "start": "DISABLE_ESLINT_PLUGIN=true craco start",
    "start:staging": "env-cmd -f ./.env.staging craco start",
    "build": "craco build",
    "build:staging": "env-cmd -f ./.env.staging craco build",
    "test": "TZ=UTC craco test --watchAll=false --maxWorkers=50%",
    "test:watch": "TZ=UTC craco test --maxWorkers=25%",
    "test:ci": "TZ=UTC craco test --watchAll=false --runInBand",
    "test:heap": "TZ=UTC craco --inspect-brk test --watchAll=false --runInBand --logHeapUsage",
    "eject": "craco eject",
    "lint": "eslint --ext .js,.jsx,.ts,.tsx src/",
    "lint:fix": "eslint --fix --ext .js,.jsx,.ts,.tsx src/",
    "lint:summary": "SORT_BY=errors DESC=true eslint -f summary --ext .js,.jsx,.ts,.tsx src/",
    "prettier:check": "prettier --check 'src/**/*.{js,jsx,ts,tsx,json,css,scss,md}'",
    "prettier:fix": "prettier --write --check 'src/**/*.{js,jsx,ts,tsx,json,css,scss,md}'",
    "storybook": "mdx2-issue-checker && storybook dev -p 6006 -s public",
    "storybook:build": "mdx2-issue-checker && storybook build -s public",
    "chromatic": "chromatic",
    "danger": "danger",
    "prune": "ts-prune"
  },
  "lint-staged": {
    "src/**/*.{js,jsx,ts,tsx,json,css,scss,md}": [
      "prettier --write"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "jest": {
    "resetMocks": false
  },
  "devDependencies": {
    "@babel/core": "7.23.5",
    "@craco/craco": "7.1.0",
    "@hipster/mdx2-issue-checker": "0.0.7",
    "@sentry/webpack-plugin": "2.10.2",
    "@storybook/addon-a11y": "7.6.4",
    "@storybook/addon-essentials": "7.6.4",
    "@storybook/addon-links": "7.6.4",
    "@storybook/blocks": "7.6.4",
    "@storybook/node-logger": "7.6.4",
    "@storybook/preset-create-react-app": "7.6.4",
    "@storybook/react-webpack5": "7.6.4",
    "@testing-library/dom": "8.20.1",
    "@testing-library/jest-dom": "6.1.5",
    "@testing-library/react": "12.1.5",
    "@testing-library/react-hooks": "8.0.1",
    "@testing-library/user-event": "14.5.1",
    "@types/downloadjs": "1.4.6",
    "@types/history": "4.7.11",
    "@types/jest": "29.5.11",
    "@types/lodash": "4.14.202",
    "@types/node": "20.10.4",
    "@types/react": "17.0.71",
    "@types/react-router-dom": "5.3.3",
    "@types/redux-logger": "3.0.12",
    "@types/styled-components": "5.1.34",
    "@types/uuid": "9.0.7",
    "@typescript-eslint/eslint-plugin": "6.13.2",
    "@typescript-eslint/parser": "6.13.2",
    "babel-jest": "29.7.0", // added to fix the bug
    "babel-plugin-add-react-displayname": "0.0.5",
    "babel-plugin-styled-components": "2.1.4",
    "chromatic": "7.6.0",
    "danger": "11.3.1",
    "eslint": "8.55.0",
    "eslint-config-airbnb": "19.0.4",
    "eslint-config-airbnb-typescript": "17.1.0",
    "eslint-config-prettier": "9.1.0",
    "eslint-formatter-summary": "1.1.0",
    "eslint-import-resolver-typescript": "3.6.1",
    "eslint-plugin-import": "2.29.0",
    "eslint-plugin-jest": "27.6.0",
    "eslint-plugin-jsx-a11y": "6.7.1",
    "eslint-plugin-mdx": "2.2.0",
    "eslint-plugin-prettier": "4.2.1",
    "eslint-plugin-react": "7.33.2",
    "eslint-plugin-react-hooks": "4.6.0",
    "eslint-plugin-storybook": "0.6.15",
    "fishery": "2.2.2",
    "history": "4.10.1",
    "jest": "29.7.0",
    "jest-axe": "8.0.0",
    "jest-fail-on-console": "3.1.2",
    "jest-styled-components": "7.2.0",
    "jest-websocket-mock": "2.5.0",
    "prettier": "2.8.8",
    "prettier-plugin-organize-imports": "3.2.4",
    "react-select-event": "5.5.0",
    "storybook": "7.6.4",
    "ts-prune": "0.10.3"
  },
  "packageManager": "yarn@4.0.2",
  "resolutions": {
    "@types/react": "17.0.71",
    "@types/react-dom": "17.0.25",
    "webpack": "5.89.0",
    "glob-parent": "5.1.2",
    "got": "11.8.6",
    "nth-check": "2.1.1",
    "trim": "1.0.1",
    "trim-newlines": "3.0.1",
    "highlight.js": "10.7.3",
    "semver": "7.5.4",
    "optionator": "0.9.3",
    "postcss": "8.4.31"
  }
}

Additional information
None

[RodriSanchez1]

Hi! Same problem here!

[RodriSanchez1]

@curtvict Do you know any workaround until fix?

[curtvict]

Adding babel-jest locally to your package in devDependencies should clear it up until #532 is merged and released. cc: @dilanx