使用 Jest 測試 ES6 Class 時出現問題

Question

我在通過 es6 class 開玩笑進行單一測試時遇到問題。我不知道配置是否正確，或者我是否需要一些額外的 package。

這是我的文件 queue.js

export default class Queue {
    constructor() {
        ...
    }
    //Adds a new elemnt to the queue
    method1(element) {
        ...
    }
    .
    .
    .
}

這是我的測試文件

import Queue from "../src/queue";

const myQueue = new Queue();

describe("Queue", () => {
    ...
    ...
    ...

});

這是 my.babelrc 文件

{
    "presets": ["es2015"]
}

這是我的 package.json 文件。 清理、構建和生產腳本運行一切正常，但是當我嘗試運行測試時，會拋出一個錯誤。

{
    "name": "queue",
    "version": "1.0.0",
    "description": "An implementation of a queue data structure",
    "main": "queue.js",
    "scripts": {
        "test": "jest",
        "clean": "rm -dr dist",
        "build": "npm run clean && mkdir dist && babel src -s -d dist",
        "production": "npm run build && node bin/production"
    },
    "author": "Osiris Román",
    "license": "ISC",
    "jest": {
        "transform": {
            "^.+\\.js$": "babel-jest"
        }
    },
    "devDependencies": {
        "babel-cli": "^6.26.0",
        "babel-jest": "^25.4.0",
        "babel-preset-es2015": "^6.24.1",
        "babel-register": "^6.26.0",
        "jest": "^25.3.0"
    }
}

這是錯誤：

Plugin/Preset files are not allowed to export objects, only functions. In /home/usuario/practicing/javascript/queue/node_modules/babel-preset-es2015/lib/index.js

有人知道我該如何解決這個問題？

Answer 1

你得到的錯誤意味着你的一個預設與 babel 版本不兼容。

查看您的package.json ，您使用的是 babel 版本 6。但是jest和babel-jest都使用更高版本的 babel。 這會導致您的 es2015 預設無法正常工作。

如果你依賴於你當前版本的 babel，你可以將你的 jest 和 babel-jest 依賴降級到使用舊版本 babel 的版本：

npm uninstall --save-dev babel-jest jest
npm install --save-dev babel-jest@23.6.0 jest@23.6.0

如果沒有，我建議將您的 babel 版本（ babel-cli 、 babel-register和babel-preset-es2015包）升級到更新的版本。

如果您遵循第二條路徑，請注意babel-preset-es2015已棄用，建議改用@babel/preset-env 。

Answer 2

我終於找到了解決問題的方法。 如果其他人遇到同樣的問題，我會在這里分享配置。

這是我的文件 queue.js

export default class Queue {
    constructor() {
        ...
    }
    //Adds a new elemnt to the queue
    method1(element) {
        ...
    }
    .
    .
    .
}

這是我的測試文件

import Queue from "../src/queue";

const myQueue = new Queue();

describe("Queue", () => {
    ...
    ...
    ...

});

我決定使用 babel.config.js 文件代替 .babelrc 文件。 這是這個新文件的內容。

module.exports = {
    presets: [["@babel/preset-env", { targets: { node: "current" } }]],
};

這是我的 package.json 文件。 clean、build、dev、production 和 test 腳本都運行正常，沒有錯誤。

{
    "name": "queue",
    "version": "1.0.0",
    "description": "An implementation of a queue data structure",
    "main": "queue.js",
    "scripts": {
        "test": "jest",
        "clean": "rm -dr dist",
        "build": "npm run clean && babel src -s -d dist ",
        "production": "npm run build && node bin/production",
        "dev": "npm run build && node bin/dev"
    },
    "author": "Osiris Román",
    "license": "ISC",
    "devDependencies": {
        "@babel/cli": "^7.8.4",
        "@babel/core": "^7.9.0",
        "@babel/preset-env": "^7.9.5",
        "@babel/register": "^7.9.0",
        "babel-jest": "^25.5.0",
        "jest": "^25.3.0"
    }
}

感謝@mgarcia 的評論，我決定避免使用 babel-preset-es2015 來使用推薦的 @babel/preset-env。