https://www.gooddata.com/ logo
Join Slack
Powered by
Hello guys, I'm having an error running tests: ```...
# gooddata-ui
g
Hello guys, I'm having an error running tests:
Copy code
<rootDir>/node_modules/@gooddata/sdk-model/esm/index.js:13
    export { DateGranularity } from "./base/dateGranularities.js";
    ^^^^^^

    SyntaxError: Unexpected token 'export'
have you ever faced this? This started happening after updating to v9
r
Hey there @Gonçalo Teixeira, have you made sure to follow our migration guide? 🙂 The export keyword is a new one compared to v8, and you need to make sure all the dependencies are upgraded for v9 to properly function.
g
Yeah I’ve followed that article, also using typescript > 5.0. Jest and dependencies updated to latest version, gooddata packages in 9.0.1 (latest)
r
Could you share your package.json with me so that I can double-check? Many thanks! 🙂
g
Copy code
{
  "name": "<omitted>",
  "author": "<omitted>",
  "version": "4.0.0-next.4",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "dev:pretty": "next dev | npx pino-pretty",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "lint:ci": "next lint --max-warnings 0",
    "lint:fix": "next lint --fix",
    "prettier:check": "prettier --check ./src",
    "prettier:fix": "prettier --write ./src",
    "test": "jest",
    "test:coverage": "jest --coverage --watchAll=false",
    "test:update": "jest -u",
    "checkTs:ci": "tsc --noEmit --skipLibCheck"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "engines": {
    "pnpm": ">=8.0.0 <9.0.0",
    "node": ">=18.0.0"
  },
  "packageManager": "pnpm@8.6.3",
  "dependencies": {
    "@ag-grid-community/core": "~25.3.0",
    "@babel/runtime": ">=7.0.0 <8.0.0",
    "@emotion/cache": "11.10.5",
    "@emotion/react": "^11.11.1",
    "@emotion/server": "^11.11.0",
    "@emotion/styled": "^11.11.0",
    "@floating-ui/react": "^0.24.3",
    "@fontsource/poppins": "5.0.5",
    "@gooddata/api-client-tiger": "9.0.1",
    "@gooddata/sdk-backend-base": "9.0.1",
    "@gooddata/sdk-backend-tiger": "9.0.1",
    "@gooddata/sdk-model": "9.0.1",
    "@gooddata/sdk-ui": "9.0.1",
    "@gooddata/sdk-ui-all": "9.0.1",
    "@gooddata/sdk-ui-charts": "9.0.1",
    "@gooddata/sdk-ui-dashboard": "9.0.1",
    "@gooddata/sdk-ui-ext": "9.0.1",
    "@gooddata/sdk-ui-filters": "9.0.1",
    "@gooddata/sdk-ui-geo": "9.0.1",
    "@gooddata/sdk-ui-kit": "9.0.1",
    "@gooddata/sdk-ui-loaders": "9.0.1",
    "@gooddata/sdk-ui-pivot": "9.0.1",
    "@gooddata/sdk-ui-theme-provider": "9.0.1",
    "@growthbook/growthbook": "0.27.0",
    "@growthbook/growthbook-react": "0.17.0",
    "@mui/icons-material": "^5.14.1",
    "@mui/lab": "5.0.0-alpha.134",
    "@mui/material": "^5.14.2",
    "@mui/system": "^5.14.1",
    "@mui/x-data-grid": "^6.9.0",
    "@next/font": "13.4.12",
    "@react-buddy/ide-toolbox-next": "^2.4.0",
    "@react-buddy/palette-mui": "^5.0.1",
    "@reduxjs/toolkit": "^1.9.3",
    "@sentry/nextjs": "7.60.1",
    "@sgratzl/chartjs-chart-boxplot": "4.1.1",
    "@types/node": "18.14.4",
    "chart.js": "4.2.1",
    "csstype": "^3.0.10",
    "date-fns": "^2.29.3",
    "eslint-config-next": "13.4.12",
    "install": "0.13.0",
    "jose": "^4.13.1",
    "lodash": "4.17.21",
    "mixpanel-browser": "^2.45.0",
    "next": "13.4.12",
    "next-auth": "^4.22.3",
    "next-redux-wrapper": "^8.1.0",
    "nextjs-progressbar": "0.0.16",
    "notistack": "^3.0.1",
    "pino": "^8.11.0",
    "prop-types": "^15.6.0",
    "react": "^18.2.0",
    "react-chartjs-2": "5.2.0",
    "react-copy-to-clipboard": "^5.1.0",
    "react-dom": "^18.2.0",
    "react-pdf": "^7.1.2",
    "react-redux": "^8.0.5",
    "recharts": "2.4.3",
    "redux": ">=4.0.0 <5.0.0",
    "redux-saga": "1.2.2"
  },
  "devDependencies": {
    "@babel/core": "7.22.10",
    "@babel/preset-env": "7.22.10",
    "@babel/preset-react": "7.22.5",
    "@babel/preset-typescript": "7.22.5",
    "@commitlint/cli": "^17.6.6",
    "@commitlint/config-conventional": "^17.6.6",
    "@jest/globals": "29.6.2",
    "@semantic-release/changelog": "6.0.2",
    "@semantic-release/exec": "6.0.3",
    "@semantic-release/git": "10.0.1",
    "@semantic-release/gitlab": "9.5.1",
    "@testing-library/dom": ">=7.21.4",
    "@testing-library/jest-dom": "5.17.0",
    "@testing-library/react": "14.0.0",
    "@testing-library/react-hooks": "7.0.2",
    "@testing-library/user-event": "14.4.3",
    "@types/jest": "^26.0.23",
    "@types/lodash": "4.14.191",
    "@types/react": "18.2.17",
    "@types/react-dom": "18.2.7",
    "@typescript-eslint/eslint-plugin": "^6.2.0",
    "@typescript-eslint/parser": "^6.2.0",
    "babel-jest": "29.6.2",
    "babel-plugin-dynamic-import-node": "^2.3.3",
    "conventional-changelog-conventionalcommits": "^5.0.0",
    "eslint": "^8.45.0",
    "eslint-config-airbnb": "^19.0.4",
    "eslint-config-prettier": "^8.9.0",
    "eslint-plugin-import": "^2.28.0",
    "eslint-plugin-jsx-a11y": "^6.7.1",
    "eslint-plugin-prettier": "^5.0.0",
    "eslint-plugin-react": "^7.33.0",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-security": "^1.7.1",
    "eslint-plugin-simple-import-sort": "^10.0.0",
    "eslint-plugin-sonarjs": "^0.19.0",
    "husky": "^8.0.3",
    "jest": "29.6.2",
    "jest-environment-jsdom": "29.6.2",
    "jest-junit": "^16.0.0",
    "jest-next-dynamic": "^1.0.1",
    "jest-resolver-enhanced": "1.1.0",
    "lint-staged": "^13.1.2",
    "pino-pretty": "^10.0.0",
    "prettier": "^3.0.0",
    "semantic-release": "19",
    "ts-jest": "29.1.1",
    "typescript": "5.1.6"
  }
}
👀 1
i
Hi I am not sure that could help but for me it sounds that problem is in JEST (I would recommend migrate solution to VITEST that support ESM natively and migration is very easy almost 1:1 ). https://vitest.dev/ So lets try fix your jest ... pls try to add to your jest config parameter transformIgnorePatterns (https://jestjs.io/docs/configuration#transformignorepatterns-arraystring) What we have in one our app is this
Copy code
transformIgnorePatterns: [
    // transform ignore esm packages so that Jest can use them
    "/node_modules/(?!@gooddata).+\\.js$",
],
Pls I wrote the ignore pattern blindly not tested hope it will work. Let us know if this help.
🙌 1
g
this is our jest config, do you see any red flags? I've been stuck with this for too long now, I might consider vitest since adapting from jest is straightforward as you said.
Copy code
// eslint-disable-next-line @typescript-eslint/no-var-requires
const nextJest = require('next/jest');

const createJestConfig = nextJest({
  // Provide the path to your Next.js app to load next.config.js and .env files in your test environment
  dir: './',
});

// Add any custom config to be passed to Jest
/** @type {import("jest").Config} */
const customJestConfig = {
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/src/$1',
  },
  testEnvironment: 'jest-environment-jsdom',

  collectCoverageFrom: [...],
  resetMocks: false,

  coverageThreshold: {
    global: {
      branches: 80,
      functions: 85,
      lines: 95,
      statements: 95,
    },
  },

  transformIgnorePatterns: ['node_modules/(?!@gooddata).+\\.js$'],

  coverageReporters: [
    'json',
    'lcov',
    'text',
    'clover',
    'cobertura',
    'html',
    'text-summary',
  ],

  testResultsProcessor: 'jest-junit',

  setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
};

// createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async
module.exports = createJestConfig(customJestConfig);
i
This changes not help u ? In your package JSON I see that you have installed "ts-jest": "29.1.1", and "babel-jest": "29.6.2", Are you writing test in Typescript ? than I missing trasnform setting in your jest config https://kulshekhar.github.io/ts-jest/docs/getting-started/options also I will try look at this https://jestjs.io/docs/ecmascript-modules
here is example of our config in one of app
Copy code
const defaultConfig = {
    transform: {
        "^.+\\.(t|j)sx?$": ["@swc/jest"],
    },
    testPathIgnorePatterns: ["/node_modules/", "/dist/"],
    modulePathIgnorePatterns: ["<rootDir>/.*/__mocks__"],
    transformIgnorePatterns: [
        // transform esm packages so that Jest can use them
        "/node_modules/(?!intl-messageformat|intl-messageformat-parser|@gooddata|uuid|@hookform|default-import|node-fetch|data-uri-to-buffer|fetch-blob|formdata-polyfill).+\\.js$",
    ],
    moduleFileExtensions: ["js", "jsx", "ts", "tsx", "json", "node"],
   
    snapshotFormat: {
        escapeString: true,
        printBasicPrototype: true,
    },
};
as transformer we are using this 
@swc/jest
g
I'll be testing that config for our case
👍 1
still getting the same error... to give more context, we are using Next.JS 13.4 (App Router) and Typescript
i
Ok thanks still its problem of JEST and ESM package I am not sure why this not help you after quick googling I have found this links https://stackoverflow.com/questions/71427330/nextjs-jest-transform-transformignorepatterns-not-working-with-esm-modules/72926763#72926763 or https://stackoverflow.com/questions/75261877/jest-encountered-an-unexpected-token-with-next-js-and-typescript-when-using-crea all this post had same problem as you
g
I've managed to implemented vitest, kudos to @Ivan Mjartan for the help, I will probably stick with vitest instead of jest
i
Good! Happy for that!!! BTW Vitest is good choice it is light it is fast no crazy config need and natively support Typescript and modern ESM modules.
g
yeah, I was already thinking of moving away from jest, but we got so many tests it would be a big effort to migrate. Since the migration to vitest is very easy (time-wise) it was a great fit. Many thanks!
i
^^^ we did the same in our SDK (thousand test migrated) almost without problems/coding ... some tricky part was mocks and react testing library but VITEST has good documentation check our SDK repo for inspiration https://github.com/gooddata/gooddata-ui-sdk
g
yeah, I'm finding those type of issues, but nothing too complicated anyways, wish there was a codemod tho, to insert imports from vitest like 
it
, 
describe
and 
expect
into test files, and renaming references from 
jest
to 
vi
👍 1
Open in Slack
PreviousNext
Powered by