Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

CRA + jsxImportSource pragma + jest #3151

Open
NikosgGrigoratos opened this issue Jan 18, 2024 · 0 comments
Open

CRA + jsxImportSource pragma + jest #3151

NikosgGrigoratos opened this issue Jan 18, 2024 · 0 comments
Labels
bug needs triage

Comments

@NikosgGrigoratos
Copy link

NikosgGrigoratos commented Jan 18, 2024 •
edited

Hello there and thank you in advance for any help provided. We have a CRA project that uses emotion and in order to use the CSS prop what we have been doing till now was to add /** @jsxImportSource @emotion/react */ on top of every file.
The issue is that when we try to run tests in the components that use this pragma we get the following error:
importSource cannot be set when runtime is classic.

Here is the babel.config.js file:

// babel.config.js
module.exports = {
  presets: [
    ['@babel/preset-env', { targets: { node: 'current' }, modules: 'auto' }],
    ['@babel/preset-react', { runtime: 'automatic', importSource: '@emotion/react' }],
    'airbnb',
    '@emotion/babel-preset-css-prop'
  ],
  plugins: [
    // Other
    '@babel/plugin-proposal-object-rest-spread',
    '@babel/plugin-transform-object-assign',
    '@emotion/babel-plugin',

    // Stage 1
    '@babel/plugin-proposal-export-default-from',
    '@babel/plugin-proposal-logical-assignment-operators',
    ['@babel/plugin-proposal-optional-chaining', { loose: false }],
    ['@babel/plugin-proposal-pipeline-operator', { proposal: 'minimal' }],
    ['@babel/plugin-proposal-nullish-coalescing-operator', { loose: false }],
    '@babel/plugin-proposal-do-expressions',

    // Stage 2
    ['@babel/plugin-proposal-decorators', { legacy: true }],
    '@babel/plugin-proposal-function-sent',
    '@babel/plugin-proposal-export-namespace-from',
    '@babel/plugin-proposal-numeric-separator',
    '@babel/plugin-proposal-throw-expressions',

    // Stage 3
    '@babel/plugin-syntax-dynamic-import',
    '@babel/plugin-syntax-import-meta',
    ['@babel/plugin-proposal-class-properties', { loose: false }],
    '@babel/plugin-proposal-json-strings'
  ],
  babelrcRoots: ['./', './subModules/Bidding']
};

And here is the package.json important modules:

"@emotion/react": "^11.11.3",
"@emotion/styled": "^11.11.0",
"@emotion/babel-preset-css-prop": "^11.10.0",
"@emotion/jest": "^11.11.0",
"react": "18.2.0",
"react-scripts": "^5.0.1",
"@testing-library/jest-dom": "^5.16.5",
"jest": "^29.7.0",
"jest-environment-jsdom": "^29.7.0",
"jest-resolve": "^29.7.0",
"jest-transform-stub": "^2.0.0",
"jest-watch-typeahead": "^2.2.2",
"babel-jest": "^29.7.0",
"jest": {
    "globals": {
      "window": {
        "location": {
          "pathname": ""
        }
      }
    },
    "modulePaths": [
      "<rootDir>/src/"
    ],
    "setupFiles": [
      "dotenv/config"
    ],
    "moduleDirectories": [
      "node_modules",
      "<rootDir>"
    ],
    "transform": {
      "^.+\\.[jt]s?$": "babel-jest"
    },
    "transformIgnorePatterns": [
      "node_modules/(?!@shotgunjed)/"
    ],
    "moduleNameMapper": {
      "^.+.(svg|png|jpg)$": "jest-transform-stub",
      "\\.(css|less|scss)$": "__mocks__/utils/variables.js",
      "react-notification-system-redux": "__mocks__/utils/packages/npm-package.js",
      "react-dates/initialize": "__mocks__/utils/packages/npm-package.js",
      "react-dates": "__mocks__/utils/packages/npm-package.js",
      "react-dropzone": "__mocks__/utils/packages/npm-react-dropzone.js",
      "react-custom-scrollbars": "__mocks__/utils/packages/npm-package.js",
      "react-mentions": "__mocks__/utils/packages/npm-package.js",
      "react-lottie": "__mocks__/utils/packages/npm-package.js"
    },
    "testEnvironment": "jsdom",
    "testEnvironmentOptions": {
      "html": "<html lang=\"en\"></html>"
    }
},

And also here is what I get when I run my tests with --showConfig:

{
  "configs": [
    {
      "automock": false,
      "cache": true,
      "cacheDirectory": "/tmp/jest_rs",
      "clearMocks": false,
      "collectCoverageFrom": [],
      "coverageDirectory": "/home/monospace/Projects/orca/core/orca_core_front/coverage",
      "coveragePathIgnorePatterns": [
        "/node_modules/"
      ],
      "cwd": "/home/monospace/Projects/orca/core/orca_core_front",
      "detectLeaks": false,
      "detectOpenHandles": false,
      "errorOnDeprecated": false,
      "extensionsToTreatAsEsm": [],
      "fakeTimers": {
        "enableGlobally": false
      },
      "forceCoverageMatch": [],
      "globals": {
        "window": {
          "location": {
            "pathname": ""
          }
        }
      },
      "haste": {
        "computeSha1": false,
        "enableSymlinks": false,
        "forceNodeFilesystemAPI": true,
        "throwOnModuleCollision": false
      },
      "id": "c1ed487ae3541c471871830bc6757a5f",
      "injectGlobals": true,
      "moduleDirectories": [
        "node_modules",
        "/home/monospace/Projects/orca/core/orca_core_front"
      ],
      "moduleFileExtensions": [
        "js",
        "mjs",
        "cjs",
        "jsx",
        "ts",
        "tsx",
        "json",
        "node"
      ],
      "moduleNameMapper": [
        [
          "^.+.(svg|png|jpg)$",
          "jest-transform-stub"
        ],
        [
          "\\.(css|less|scss)$",
          "__mocks__/utils/variables.js"
        ],
        [
          "react-notification-system-redux",
          "__mocks__/utils/packages/npm-package.js"
        ],
        [
          "react-dates/initialize",
          "__mocks__/utils/packages/npm-package.js"
        ],
        [
          "react-dates",
          "__mocks__/utils/packages/npm-package.js"
        ],
        [
          "react-dropzone",
          "__mocks__/utils/packages/npm-react-dropzone.js"
        ],
        [
          "react-custom-scrollbars",
          "__mocks__/utils/packages/npm-package.js"
        ],
        [
          "react-mentions",
          "__mocks__/utils/packages/npm-package.js"
        ],
        [
          "react-lottie",
          "__mocks__/utils/packages/npm-package.js"
        ]
      ],
      "modulePathIgnorePatterns": [],
      "modulePaths": [
        "/home/monospace/Projects/orca/core/orca_core_front/src"
      ],
      "openHandlesTimeout": 1000,
      "prettierPath": "prettier",
      "resetMocks": false,
      "resetModules": false,
      "restoreMocks": false,
      "rootDir": "/home/monospace/Projects/orca/core/orca_core_front",
      "roots": [
        "/home/monospace/Projects/orca/core/orca_core_front"
      ],
      "runner": "/home/monospace/Projects/orca/core/orca_core_front/node_modules/jest-config/node_modules/jest-runner/build/index.js",
      "sandboxInjectedGlobals": [],
      "setupFiles": [
        "/home/monospace/Projects/orca/core/orca_core_front/node_modules/dotenv/config.js"
      ],
      "setupFilesAfterEnv": [],
      "skipFilter": false,
      "slowTestThreshold": 5,
      "snapshotFormat": {
        "escapeString": false,
        "printBasicPrototype": false
      },
      "snapshotSerializers": [
        "/home/monospace/Projects/orca/core/orca_core_front/node_modules/@emotion/jest/serializer/dist/emotion-jest-serializer.cjs.js"
      ],
      "testEnvironment": "/home/monospace/Projects/orca/core/orca_core_front/node_modules/jest-environment-jsdom/build/index.js",
      "testEnvironmentOptions": {
        "html": "<html lang=\"en\"></html>"
      },
      "testLocationInResults": false,
      "testMatch": [
        "**/__tests__/**/*.[jt]s?(x)",
        "**/?(*.)+(spec|test).[tj]s?(x)"
      ],
      "testPathIgnorePatterns": [
        "/node_modules/"
      ],
      "testRegex": [],
      "testRunner": "/home/monospace/Projects/orca/core/orca_core_front/node_modules/jest-circus/runner.js",
      "transform": [
        [
          "^.+\\.[jt]s?$",
          "/home/monospace/Projects/orca/core/orca_core_front/node_modules/babel-jest/build/index.js",
          {}
        ],
        [
          "^.+\\.(js|jsx)$",
          "/home/monospace/Projects/orca/core/orca_core_front/node_modules/babel-jest/build/index.js",
          {}
        ]
      ],
      "transformIgnorePatterns": [
        "node_modules/(?!@shotgunjed)/"
      ],
      "watchPathIgnorePatterns": []
    }
  ],
  "globalConfig": {
    "bail": 0,
    "changedFilesWithAncestor": false,
    "ci": false,
    "collectCoverage": false,
    "collectCoverageFrom": [],
    "coverageDirectory": "/home/monospace/Projects/orca/core/orca_core_front/coverage",
    "coverageProvider": "babel",
    "coverageReporters": [
      "json",
      "text",
      "lcov",
      "clover"
    ],
    "detectLeaks": false,
    "detectOpenHandles": false,
    "errorOnDeprecated": false,
    "expand": false,
    "findRelatedTests": false,
    "forceExit": false,
    "json": false,
    "lastCommit": false,
    "listTests": false,
    "logHeapUsage": false,
    "maxConcurrency": 5,
    "maxWorkers": 15,
    "noStackTrace": false,
    "nonFlagArgs": [
      "src/__tests__/hooks/usePriceBaseCurrencyEquivalent.spec.js"
    ],
    "notify": false,
    "notifyMode": "failure-change",
    "onlyChanged": false,
    "onlyFailures": false,
    "openHandlesTimeout": 1000,
    "passWithNoTests": false,
    "projects": [],
    "rootDir": "/home/monospace/Projects/orca/core/orca_core_front",
    "runTestsByPath": false,
    "seed": -1940581418,
    "skipFilter": false,
    "snapshotFormat": {
      "escapeString": false,
      "printBasicPrototype": false
    },
    "testFailureExitCode": 1,
    "testPathPattern": "src/__tests__/hooks/usePriceBaseCurrencyEquivalent.spec.js",
    "testSequencer": "/home/monospace/Projects/orca/core/orca_core_front/node_modules/@jest/test-sequencer/build/index.js",
    "updateSnapshot": "new",
    "useStderr": false,
    "watch": false,
    "watchAll": false,
    "watchman": true,
    "workerThreads": false
  },
  "version": "29.7.0"
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug needs triage
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@NikosgGrigoratos