用Jest测试ES6类时的问题

Question

我在用jest对一个es6类进行单元测试时遇到了问题。我不知道配置是否正确，或者我是否需要一些额外的包。

这是我的文件 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", () => {
    ...
    ...
    ...

});

这是我的.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 [email protected] [email protected]

如果没有，我建议您升级您的 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文件。清理、构建、开发、生产和测试脚本都能正常运行，没有错误。

{
    "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，而使用推荐的@babelpreset-env。