Блог

Пакеты Atlaskit в node_modules вызывают сбой Jest в извлеченном create-react-app. App.test.js Пока у меня есть только файл по умолчанию, и я получаю SyntaxError: Unexpected token export from @atlaskit/dropdown-menu .

Изображение ошибки

Я просмотрел все разные вопросы по проблемам StackOverflow и Github, и хотя стандартный ответ, который все продолжают предлагать попробовать, — это сосредоточиться transformIgnorePatterns на конфигурации Jest, ничто из того, что я пробовал, похоже, не помогает, так что это может быть отдельной проблемой.

В package.json моей текущей конфигурации Jest выглядит следующим образом. Это конфигурация по умолчанию, которая отображается после извлечения:

package.json

 "jest": {
    "collectCoverageFrom": [
      "src/**/*.{js,jsx,ts,tsx}",
      "!src/**/*.d.ts"
    ],
    "resolver": "jest-pnp-resolver",
    "setupFiles": [
      "react-app-polyfill/jsdom"
    ],
    "testMatch": [
      "<rootDir>/src/**/__tests__/**/*.{js,jsx,ts,tsx}",
      "<rootDir>/src/**/?(*.)(spec|test).{js,jsx,ts,tsx}"
    ],
    "testEnvironment": "jsdom",
    "testURL": "http://localhost",
    "transform": {
      "^. \.(js|jsx|ts|tsx)$": "<rootDir>/node_modules/babel-jest",
      "^. \.css$": "<rootDir>/config/jest/cssTransform.js",
      "^(?!.*\.(js|jsx|ts|tsx|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
    },
    "transformIgnorePatterns": [
      "[/\\]node_modules[/\\]. \.(js|jsx|ts|tsx)$",
      "^. \.module\.(css|sass|scss)$"
    ],
    "moduleNameMapper": {
      "^react-native$": "react-native-web",
      "^. \.module\.(css|sass|scss)$": "identity-obj-proxy"
    },
    "moduleFileExtensions": [
      "web.js",
      "js",
      "web.ts",
      "ts",
      "web.tsx",
      "tsx",
      "json",
      "web.jsx",
      "jsx",
      "node"
    ]
  }
 

Я также удалил babel конфигурации и eslint из package.json них в их собственные отдельные файлы.

.babelrc.js

 const plugins = [
  [
    "module-resolver",
    {
      root: [
        "."
      ],
      alias: {
        atoms: "./src/components/atoms",
        molecules: "./src/components/molecules",
        organisms: "./src/components/organisms",
        pages: "./src/components/pages"
      }
    }
  ]
]

module.exports = {
  env: {
    development: {
      presets: ["react-app"],
      plugins,
    },
    local: {
      presets: ["react-app"],
      plugins,
    },
    qa: {
      presets: ["react-app"],
      plugins,
    },
    stage: {
      presets: ["react-app"],
      plugins,
    },
    production: {
      presets: ["react-app"],
      plugins,
    },
    test: {
      presets: [
        ["react-app",
          { 'preset-env': {
            'modules': 'commonjs'
          }}
        ]
      ],
      plugins,
    }
  }
}
 

.eslintrc.json

 {
    "extends": ["standard", "standard-react"],
    "env": {
        "browser": true,
        "es6": true,
        "jest": true
    },
    "plugins": [
        "standard",
        "react"
    ],
    "globals": {
        "Atomics": "readonly",
        "SharedArrayBuffer": "readonly"
    },
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true,
            "javascript": true,
            "modules": true
        },
        "ecmaVersion": 2018,
        "sourceType": "module"
    },
    "rules": {

    }
}
 

Я ожидаю, что при npm run test вызове все node_modules , а не только @atlaskit связанные, будут правильно преобразованы в код, который не вызывает сбоев Jest.