Бабель @7 и шутка конфигурации

Question

Может быть, вы можете мне помочь? Я пытаюсь настроить Jest для использования Babel@7 Итак, у меня есть:

"jest": "^23.4.1",
"@babel/core": "^7.0.0-beta.54",
"babel-7-jest": "^21.3.3",
"babel-jest": "^20.0.3",

И шутка конфиг внутри package.json

"jest": {
    "transform": {
      "^.+\\.js$": "babel-7-jest",
    },

И получил

TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string

Но если я использую

"jest": {
    "transform": {
      "^.+\\.js$": "babel-jest",
    },

я получил

Requires Babel "^7.0.0-0", but was loaded with "6.26.3". If you are sure you have a compatible version of @babel/core, it is likely that something in your build process is loading the wrong version. Inspect the stack trace of this error to look for the first entry that doesn't mention "@babel/core" or "babel-core" to see what is calling Babel.

Конфигурация Babel: https://gist.github.com/SilentImp/1506e9c26d16d9839a4469c6f3ae5c4d

Может быть, у вас есть идеи?

Answer 1

Я считаю, что нашел рабочее решение (не спасибо команде Jest, предоставляющей неработающую документацию и уклоняющейся от проблем GitHub по этой проблеме).

Вам нужно следующее в вашем devDependencies раздел вашего package.json:

  "devDependencies": {
    "@babel/core": "^7.0.0-beta.54",
    "@babel/preset-env": "^7.0.0-beta.54",
    "babel-core": "^7.0.0-bridge.0",
    "babel-jest": "^23.4.0",
    "bili": "^3.1.2",
    "jest": "^23.4.1",
    "regenerator-runtime": "^0.12.0"
  }

Следующее в вашем .babelrc:

{
    "presets": [
        [
            "@babel/preset-env",
            {
                "debug": false,
                "targets": {
                    "browsers": [
                        "last 3 versions"
                    ]
                }
            }
        ]
    ]
}

В моем конкретном проекте мне не нужно было использовать конфигурацию Jest, поэтому я удалил свой пустой jest.config.js файл.

Ключевые моменты:

• Удалить babel-7-jest поскольку это устарело, так как теперь есть официальная поддержка для него.
• Убедитесь, что используете только @babel/xyz пакеты идут вперед - babel-core Bridge One, который я установил, - это "официальный" способ использования последней версии Babel 7. Я предполагаю, что эта потребность будет устранена в будущем, когда все перейдет на Babel 7.
• Теперь вы можете использовать функции ES6+, включая import/export и больше не нужны устаревшие require(),

Редактировать:

Если вы хотите иметь более подробный журнал прохождения / провал тестов, то поместите это в свой jest.config.js:

module.exports = {
    "verbose": true   
}

Answer 2

Я получил это работает здесь.

Это все мои пакеты Babel:

"@babel/core": "^7.1.2",
"@babel/node": "^7.0.0",
"@babel/preset-env": "^7.1.0",
"@babel/preset-react": "^7.0.0",
"@babel/register": "^7.0.0",
"babel-core": "^7.0.0-bridge.0",
"babel-jest": "^23.6.0",
"babel-loader": "^8.0.4"

И мне пришлось установить babel-core@^7.0.0-bridge.0 как это упоминается на сайте Jest.

Мой .babelrc:

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react"
  ]
}

И мой скрипт npm: jest --config ./test/jest.config.json Это не изменилось для обновления Babel 7.

Answer 3

4 дня назад Facebook добавил поддержку babel 7 для jest, так что больше нет необходимости использовать мост babel 7.

Для получения дополнительной информации: https://github.com/facebook/jest/blob/master/README.md#using-babel

Answer 4

Я боролся с этой проблемой несколько дней безуспешно, пока не увидел этот пост. Большое спасибо всем, кто разместил свою работу!

Вот моя конфигурация для наглядности. Это приложение VueJs, использующее Jest. Надеюсь, это кому-то поможет:)

Мой скрипт npm для тестов

"test:unit": "jest --config ./jest.config.js"

Мои пакеты Babel

    "@babel/core": "^7.6.2",
    "babel-loader": "^8.0.4",
    "babel-core": "^7.0.0-bridge.0",
    "@babel/preset-env": "^7.6.2",
    "babel-eslint": "^10.0.1",
    "babel-jest": "^23.6.0",
    "@vue/cli-plugin-babel": "^3.11.0",

babel.config.js

module.exports = {
    presets: [
        [
            '@babel/preset-env',
            {
                debug: false,
                targets: {
                    browsers: ['last 3 versions'],
                },
            },
        ],
    ],
};

jest.confg.js

module.exports = {
    verbose: true,
    moduleFileExtensions: ['js', 'json', 'vue'],
    moduleNameMapper: {
        '^@/(.*)$': '<rootDir>/src/$1',
    },
    transform: {
        '^.+\\.vue$': 'vue-jest',
        '.+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$': 'jest-transform-stub',
        '^.+\\.(js|jsx)?$': 'babel-jest',
    },
    transformIgnorePatterns: ['<rootDir>/node_modules/'],
    testMatch: ['**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)'],
    collectCoverage: false,
    collectCoverageFrom: ['src/components/*.{js,vue}', '!**/node_modules/**'],
    coverageReporters: ['html', 'text-summary'],
};