vue + jest + typescript: Unexpected token = at class static function答案

【问题标题】：vue + jest + typescript: Unexpected token = at class static functionvue + jest + typescript: Unexpected token = at class static function
【发布时间】：2020-03-13 21:32:22
【问题描述】：

尝试用 jest 创建单元测试。我试过我们 ts-jest，有很多问题。尝试通天塔，离得更近了。实际上得到了一个测试工作。但后来我遇到了这个。

static cachedVendors = [];
                     ^

SyntaxError: Unexpected token =

文件如下

//imports up here somewhere
export default class Vendor {
    public static cachedVendors: Vendor[] = [];
    ...more code
}

笑话配置

const { defaults: tsjPreset } = require("ts-jest/presets");

module.exports = {
    ...tsjPreset,
    transform: {
        "^.+\\.[t|j]s?$": "babel-jest",
        ".*\\.(vue)$": "vue-jest"
    },
    moduleNameMapper: {
        "^@/(.*)$": "<rootDir>/src/$1",
        "^common/(.*)$": "<rootDir>/src/common/$1",
        "^price/(.*)$": "<rootDir>/src/price/$1",
        "^eligibility/(.*)$": "<rootDir>/src/eligibility/$1"
    }
};

我删除了 ...tsjPreset 的东西并得到了同样的错误。

我的 babel.config.js

module.exports = {
    presets: [["@babel/preset-env", { targets: { node: "current" } }], "@babel/preset-typescript"],
    plugins: [["@babel/plugin-proposal-export-default-from"]]
};

正如我所说，我正在运行另一个文件，看起来像这样

import Vue from "vue";
import { Component, Prop, Inject, Watch } from "vue-property-decorator";
import moment from "moment";
import * as _ from "lodash";


export const DATE_FORMAT = "MM-DD-YYYY";


@Component({
})
export default class PEMDatePicker extends Vue {

    @Prop()
    label: string;

    @Prop()
    value: string;

    @Prop()
    rules: Array<Function>; //https://vuetifyjs.com/en/components/forms#creating-rules

    public componentsLabel = "";
    public componentsDate = "";
    public showPicker = false;
    public componentsDateInput: string = moment().format("MM/DD/YYYY");

    public mounted() {

        this.componentsLabel = this.label ? this.label : "Date";
        this.setDate(this.value);

        this.$emit('input', this.value);

    }

    @Watch("value")
    public syncModel() {
        if (this.componentsDate != this.value) {

            this.setDate(this.value);
        }

        this.componentsDateInput = this.getDate;

    }

    @Watch("componentsDate")
    public syncDates() {
        this.componentsDateInput = this.getDate;
        this.$emit('input', this.componentsDate);
    }

    get getDate() {
        return this.componentsDate ? moment(this.componentsDate).format("MM/DD/YYYY") : "";
    }

    public closePicker() {
        this.showPicker = false;
        //@ts-ignore
        this.$refs.input.focus();
    }

    public handleEnterKey(event) {

        this.setDate(event.target.value);
        this.showPicker = false;
    }

    setDate(dateIn) {

        this.componentsDate = dateIn && moment(dateIn).isValid() ? moment(dateIn).format("YYYY-MM-DD") : null;
    }
}

此文件的测试成功运行。所以它正在转换打字稿。但由于某种原因不在那个特定的文件上。我很茫然。

【问题讨论】：

这有帮助吗？ github.com/babel/babelify/issues/167你可能需要升级 babel 或者添加类似babeljs.io/docs/en/babel-plugin-proposal-class-properties
啊，我没有意识到这些不是“本机”打字稿支持的一部分。叹。有时会有这么多活动部件。
是的，过去几年中转译、polyfills、复杂模块加载器和语言变化的出现（或至少采用率上升）已经引起了很多麻烦和咬牙切齿。在上面撒上打字稿以增加乐趣:)
让我知道哪些资源解决了这个问题，我会添加一个官方答案供以后的访问者查看。如果您不介意的话，我还可以编辑标题，以便对 Google 更友好。
嘿，它修复了那个，但后来我又得到了一个，哈哈。现在它不喜欢我的导出接口 IATAlogHistory。我指的是第二个链接。班级提案插件。尝试查看是否有接口问题的插件。

标签： vue.js jestjs

【解决方案1】：

Babel 对新的 js 语言功能有点保守（尤其是如果您没有使用最新版本的 babel）。在这种情况下，你似乎需要这个 babel 插件：

https://babeljs.io/docs/en/babel-plugin-proposal-class-properties

【讨论】：