iamyotav Posts - Answer Overflow

iamyotav

•Created by iamyotav on 10/6/2024 in #questions

Help Needed: Jest Fails to Transform UI Package After Migrating from CRA to Vite in Monorepo

Hi everyone, My name is Yotav, and I'm working on migrating my company's Create React App (CRA) to Vite. We have a large application that we've built over the last 7 years, and it's organized in a monorepo structure. The app uses a custom UI package we've developed, and we use Jest for testing. After starting the migration to Vite and making the necessary adjustments, I managed to get most things working. However, I'm encountering an issue where Jest stops transforming the UI package when running tests in the app. It breaks when it encounters the export keyword. I've tried various solutions found online, but none have resolved the issue. I'm hoping someone here can help. Project Structure: MonoRepo - Packages -- Web-app --- Jest config --- Babel config -- UI --- Jest config --- Babel config Error Example:

FAIL  src/__tests__/schemas/pslf.spec.js
  ● Test suite failed to run
    Details:

    /Users/yotavmasa/Summer/repos/summer/packages/ui-components/src/index.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){export { default as Button } from './core/Button';
    SyntaxError: Unexpected token 'export'

      1 | import React from 'react';
      2 |
    > 3 | import { TextInput } from '@summer/ui-components';
        | ^
      4 |
      5 | import { Row } from 'components/pages/idr/wizard/shared/styles';
      6 | import { InputWrapper } from 'components/pages/idr/wizard/steps/Submit/shared/Inputs';

      at Runtime.createScriptFromCode (../../node_modules/.pnpm/[email protected]/node_modules/jest-runtime/build/index.js:1505:14)
      at Object.require (src/components/pages/idr/wizard/steps/Submit/fields/EmployerName.jsx:3:1)
      at Object.require (src/schemas/idr.js:3:1)
      at Object.require (src/schemas/pslf.js:9:1)
      at Object.require (src/__tests__/schemas/pslf.spec.js:4:1)

FAIL  src/__tests__/schemas/pslf.spec.js
  ● Test suite failed to run
    Details:

    /Users/yotavmasa/Summer/repos/summer/packages/ui-components/src/index.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){export { default as Button } from './core/Button';
    SyntaxError: Unexpected token 'export'

      1 | import React from 'react';
      2 |
    > 3 | import { TextInput } from '@summer/ui-components';
        | ^
      4 |
      5 | import { Row } from 'components/pages/idr/wizard/shared/styles';
      6 | import { InputWrapper } from 'components/pages/idr/wizard/steps/Submit/shared/Inputs';

      at Runtime.createScriptFromCode (../../node_modules/.pnpm/[email protected]/node_modules/jest-runtime/build/index.js:1505:14)
      at Object.require (src/components/pages/idr/wizard/steps/Submit/fields/EmployerName.jsx:3:1)
      at Object.require (src/schemas/idr.js:3:1)
      at Object.require (src/schemas/pslf.js:9:1)
      at Object.require (src/__tests__/schemas/pslf.spec.js:4:1)

What I've Tried: Adjusting transformIgnorePatterns in Jest config. Modifying moduleNameMapper to ensure correct path resolutions. Ensuring Babel presets and plugins are correctly configured. Issue Details: Jest seems to fail when encountering ES6 module syntax (export keyword) in the UI package. The UI package is located in a sibling directory within the monorepo. Jest's error suggests it's not transforming the code from the UI package. you can see that i find the correct path configs:

const path = require('path');

module.exports = {
  transform: {
    '^.+\\.(js|jsx|ts|tsx)$': ['babel-jest'],
  },
  testEnvironment: '<rootDir>/testEnvironment.js',
  testEnvironmentOptions: {
    url: 'http://localhost',
  },
  modulePaths: ['<rootDir>', '<rootDir>/src'],
  moduleDirectories: [
    'node_modules',
    path.resolve(__dirname, '..'), // Allow importing from sibling packages
  ],
  testPathIgnorePatterns: ['<rootDir>/cypress/'],
  transformIgnorePatterns: [
    '/node_modules/(?!(\\.pnpm|@summer/ui-components))',
  ],
  roots: ['<rootDir>'],
  setupFilesAfterEnv: ['<rootDir>/src/setupTests.js'],
  testMatch: ['**/*.(spec|test).[tj]s?(x)'],
  extensionsToTreatAsEsm: ['.jsx', '.ts', '.tsx'],
  moduleFileExtensions: ['js', 'jsx', 'ts', 'tsx', 'json', 'node'],
  moduleNameMapper: {
    // Map @summer packages to their source files
    '^@summer/(.*)$': path.resolve(__dirname, '..', '$1', 'src'),
  },
};

const path = require('path');

module.exports = {
  transform: {
    '^.+\\.(js|jsx|ts|tsx)$': ['babel-jest'],
  },
  testEnvironment: '<rootDir>/testEnvironment.js',
  testEnvironmentOptions: {
    url: 'http://localhost',
  },
  modulePaths: ['<rootDir>', '<rootDir>/src'],
  moduleDirectories: [
    'node_modules',
    path.resolve(__dirname, '..'), // Allow importing from sibling packages
  ],
  testPathIgnorePatterns: ['<rootDir>/cypress/'],
  transformIgnorePatterns: [
    '/node_modules/(?!(\\.pnpm|@summer/ui-components))',
  ],
  roots: ['<rootDir>'],
  setupFilesAfterEnv: ['<rootDir>/src/setupTests.js'],
  testMatch: ['**/*.(spec|test).[tj]s?(x)'],
  extensionsToTreatAsEsm: ['.jsx', '.ts', '.tsx'],
  moduleFileExtensions: ['js', 'jsx', 'ts', 'tsx', 'json', 'node'],
  moduleNameMapper: {
    // Map @summer packages to their source files
    '^@summer/(.*)$': path.resolve(__dirname, '..', '$1', 'src'),
  },
};

{
  "presets": [
    [
      "@babel/preset-env",
      { "targets": { "node": "current" }, "modules": "auto" }
    ],
    ["@babel/preset-react", { "runtime": "automatic" }],
    [
      "babel-preset-vite",
      {
        "env": true,
        "glob": false
      }
    ]
  ]
}

{
  "presets": [
    [
      "@babel/preset-env",
      { "targets": { "node": "current" }, "modules": "auto" }
    ],
    ["@babel/preset-react", { "runtime": "automatic" }],
    [
      "babel-preset-vite",
      {
        "env": true,
        "glob": false
      }
    ]
  ]
}

1 replies

Gaming

Programming