search

getsentry / sentry-javascript

Official Sentry SDKs for JavaScript
https://sentry.io
MIT License
7.91k stars 1.56k forks source link

Error running Jest tests #13773

Closed benoitgrasset-cliq closed 2 weeks ago

benoitgrasset-cliq commented 2 weeks ago

Is there an existing issue for this?

How do you use Sentry?

Sentry Saas (sentry.io)

Which SDK are you using?

@sentry/nextjs

SDK Version

8.31.0

Framework Version

Next 14.2.9

Link to Sentry event

No response

Reproduction Example/SDK Setup

No response

Steps to Reproduce

I laucnh my tests with jest: yarn test

This is my package.json file:

{
  "name": "cliq-analytics",
  "private": true,
  "version": "1.30.0",
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "build-static": "next build && next export",
    "build-test": "env-cmd -f .env.test next build && next export -o build/",
    "build-prod": "env-cmd -f .env.production next build && next -o build/",
    "duplicate": "npx jscpd --min-lines 40 --pattern \"**/*.tsx\"",
    "start": "PORT=80 next start",
    "lint": "eslint \"src/**/*.{ts,tsx,js,jsx}\"",
    "lint-resolve": "eslint \"src/**/*.{ts,tsx,js,jsx}\" . --fix",
    "packages:upgrade": "yarn upgrade-interactive --latest",
    "prepare": "husky install",
    "test": "jest",
    "test:unit:watch": "jest --watch",
    "test:coverage": "yarn test --coverage",
    "test:badges": "yarn test:coverage  && jest-coverage-badges",
    "report": "ts-prune -p tsconfig.json -s .test.ts? > reports/ts-prune.txt && jest --coverage --coverageDirectory=reports/jest/"
  },
  "lint-staged": {
    "src/**/*.{ts,tsx,js,jsx}": [
      "npm run lint -- --fix"
    ]
  },
  "dependencies": {
    "@ant-design/colors": "7.1.0",
    "@ant-design/icons": "^5.4.0",
    "@aws-sdk/client-s3": "^3.637.0",
    "@emotion/react": "11.11.1",
    "@emotion/styled": "^11.13.0",
    "@faker-js/faker": "^8.4.1",
    "@formkit/drag-and-drop": "^0.1.6",
    "@hookform/devtools": "^4.3.1",
    "@hookform/resolvers": "^3.9.0",
    "@mui/icons-material": "^5.16.1",
    "@mui/lab": "^5.0.0-alpha.141",
    "@mui/material": "^5.16.7",
    "@mui/styles": "^6.1.1",
    "@mui/system": "^5.15.4",
    "@mui/utils": "^5.16.0",
    "@reduxjs/toolkit": "^2.2.1",
    "@sentry/nextjs": "^8.31.0",
    "@sentry/tracing": "^7.114.0",
    "@tanstack/query-sync-storage-persister": "^5.51.9",
    "@tanstack/react-query": "^5.51.11",
    "@tanstack/react-query-devtools": "^5.51.11",
    "@tanstack/react-query-persist-client": "^5.51.11",
    "@testing-library/jest-dom": "^6.5.0",
    "@testing-library/react": "^15.0.7",
    "@types/file-saver": "^2.0.5",
    "@types/lodash": "^4.17.0",
    "@types/papaparse": "^5.3.14",
    "@types/react-copy-to-clipboard": "^5.0.4",
    "@types/react-date-range": "^1.4.4",
    "@types/ua-parser-js": "^0.7.39",
    "@types/webpack-env": "^1.18.1",
    "apexcharts": "^3.49.0",
    "axios": "^1.7.4",
    "clsx": "^2.0.0",
    "dayjs": "^1.11.9",
    "dotenv": "^16.4.2",
    "file-saver": "^2.0.5",
    "file-system": "^2.2.2",
    "framer-motion": "^11.5.6",
    "gray-matter": "^4.0.3",
    "html-to-image": "^1.9.0",
    "jest-coverage-badges": "^1.1.2",
    "jest-environment-jsdom": "^29.6.3",
    "jest-html-reporter": "^3.10.2",
    "jscpd": "^4.0.5",
    "jspdf": "^2.5.1",
    "jszip": "^3.7.1",
    "jwt-decode": "^4.0.0",
    "lodash": "^4.17.21",
    "msw": "^2.3.0",
    "next": "^14.2.9",
    "next-build-id": "^3.0.0",
    "papaparse": "^5.4.1",
    "react": "^18.3.1",
    "react-apexcharts": "^1.4.0",
    "react-copy-to-clipboard": "^5.1.0",
    "react-date-range": "^1.4.0",
    "react-device-detect": "^2.2.2",
    "react-dom": "^18.3.1",
    "react-dropzone": "^14.2.3",
    "react-hook-form": "^7.51.0",
    "react-hot-toast": "^2.4.1",
    "react-redux": "^9.1.0",
    "redux-persist": "^6.0.0",
    "remark": "^15.0.1",
    "remark-html": "^16.0.1",
    "simplebar": "^6.2.5",
    "simplebar-react": "^3.2.4",
    "ts-prune": "^0.10.3",
    "tss-react": "^4.9.3",
    "ua-parser-js": "^1.0.37",
    "xlsx": "^0.18.5",
    "yarn": "^1.22.17",
    "yup": "^1.4.0",
    "zod": "^3.23.8"
  },
  "devDependencies": {
    "@commitlint/cli": "^19.4.0",
    "@commitlint/config-conventional": "^19.5.0",
    "@next/eslint-plugin-next": "^14.0.3",
    "@semantic-release/changelog": "^6.0.3",
    "@semantic-release/exec": "^6.0.3",
    "@semantic-release/git": "^10.0.1",
    "@svgr/webpack": "^8.1.0",
    "@types/jest": "^29.5.3",
    "@types/node": "^22.1.0",
    "@types/react": "^18.3.2",
    "@types/react-dom": "^18.3.0",
    "@typescript-eslint/eslint-plugin": "^6.21.0",
    "@typescript-eslint/parser": "^7.13.1",
    "babel-jest": "^29.6.3",
    "eslint": "^8.57.0",
    "eslint-config-airbnb": "19.0.4",
    "eslint-config-airbnb-typescript": "^17.0.0",
    "eslint-config-next": "^14.2.3",
    "eslint-config-prettier": "^9.1.0",
    "eslint-config-standard-with-typescript": "43.0.0",
    "eslint-config-ts": "^4.0.1",
    "eslint-plugin-import": "^2.29.1",
    "eslint-plugin-jest": "^28.8.0",
    "eslint-plugin-jsx-a11y": "^6.10.0",
    "eslint-plugin-prettier": "^5.2.1",
    "eslint-plugin-react": "^7.36.1",
    "husky": "^9.0.11",
    "jest": "^29.6.3",
    "lint-staged": "^15.2.0",
    "prettier": "^3.0.3",
    "sass": "^1.77.6",
    "semantic-release": "^24.1.1",
    "stylelint": "^15.11.0",
    "stylelint-config-prettier": "^9.0.5",
    "stylelint-config-standard": "^34.0.0",
    "stylelint-config-standard-scss": "^11.1.0",
    "ts-jest": "^29.2.4",
    "typescript": "^5.6.2"
  },
  "msw": {
    "workerDirectory": "public"
  },
  "jscpd": {
    "reporters": [
      "console"
    ],
    "ignore": [
      "**/node_modules/**"
    ]
  }
}

babel.config.json file:

{
  "presets": ["next/babel"]
}

jest.config.js file:

module.exports = {
  verbose: true,
  clearMocks: true,
  collectCoverage: true,
  coverageReporters: ['html', 'text', 'lcov', 'json-summary'],
  coverageDirectory: './coverage',
  moduleFileExtensions: ['ts', 'js', 'tsx'],
  preset: 'ts-jest',
  roots: ['<rootDir>'],
  setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
  testEnvironment: 'jest-environment-jsdom',
  testPathIgnorePatterns: [
    '.*/(constants.test.tsx)$',
    '<rootDir>/node_modules/',
    '<rootDir>/.next/',
  ],
  transform: {
    '^.+\\.(ts|tsx)$': ['babel-jest', { configFile: './__tests__/config/babel.config.json' }],
  },
  moduleNameMapper: {
    '^components/(.*)$': '<rootDir>/src/components/$1',
    '^pages/(.*)$': '<rootDir>/src/pages/$1',
    '^shared/(.*)$': '<rootDir>/src/shared/$1',
    '^store/(.*)$': '<rootDir>/src/store/$1',
    '\\.(css|less|scss|sass)$': '<rootDir>/src/mocks/styleMock.ts',
  },
};

Expected Result

I expect my tests to be run.

Actual Result

Error [ERR_REQUIRE_ESM]: require() of ES Module /home/benoit/projets/react-hype-analytics/node_modules/string-width/index.js from /home/benoit/projets/react-hype-analytics/node_modules/cliui/build/index.cjs not supported. Instead change the require of index.js in /home/benoit/projets/react-hype-analytics/node_modules/cliui/build/index.cjs to a dynamic import() which is available in all CommonJS modules. at Object.<anonymous> (/home/benoit/projets/react-hype-analytics/node_modules/cliui/build/index.cjs:291:21)

chargome commented 2 weeks ago

Hi @benoitgrasset-cliq, can you explain why you think your issue is related to the Sentry SDK?

Additionally I saw that your projects includes @sentry/tracing, which is deprecated – you can safely remove that since you are running using v8 of our next SDK.

benoitgrasset-cliq commented 2 weeks ago

Thank you for your answer ! I had an issue with babel-jest module which is not up to date, and probably @sentry/tracing also. I removed both of them and used ts-jest instead.