шутка бабел плагинов конфликт - PullRequest
4 голосов
/ 14 марта 2020

Использование Jest + babel.

Babel Config

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

Документы утверждают, что плагин декоратора должен соответствовать свойствам класса, что я и делаю. Но я все еще получаю эту ошибку

"Unexpected Token"
public showReorderTooltip = false; 
       ^

Jest Config

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

Я добавил плагин свойств класса из-за ошибки, которая возникла там, где он не переносит публикацию c stati c переменные в классе. Теперь это делает это. Но тогда ему не понравился декоратор, который был у меня наверху. Хорошо, похоже, плагин. Это работает, но теперь ему снова не нравятся свойства класса? Или есть еще другой плагин для обработки "нормальных" свойств класса?

Вся настройка проекта:

  • vue -property-decorator // где декораторы исходят из
  • машинопись
  • vue
  • vuetify
  • некоторых других второстепенных библиотек
  • vue -cli / / не использую webpack напрямую, хотя я представляю, что vue -cli использует его

пакет. json

        "@babel/core": "^7.8.7",
        "@babel/plugin-proposal-class-properties": "^7.8.3",
        "@babel/plugin-proposal-decorators": "^7.8.3",
        "@babel/plugin-proposal-export-default-from": "^7.8.3",
        "@babel/preset-typescript": "^7.8.3",        

        "@types/jest": "^25.1.4",            
        "@types/lodash": "4.14.136",
        "@types/qs": "6.5.3",
        "@vue/cli-plugin-router": "^4.1.0",
        "@vue/cli-plugin-typescript": "^4.1.2",
        "@vue/cli-plugin-vuex": "^4.1.0",
        "@vue/cli-service": "^4.1.2",
        "@vue/test-utils": "^1.0.0-beta.32",
        "babel-core": "^7.0.0-bridge.0",
        "babel-jest": "^25.1.0",
        "babel-preset-env": "^1.7.0",
        "cross-env": "^6.0.3",
        "css-loader": "2.1.1",
        "file-loader": "3.0.1",
        "font-awesome": "^4.7.0",
        "jest": "^25.1.0",
        "jest-serializer-vue": "^2.0.2",
        "jquery": "3.4.1",
        "jwt-decode": "2.2.0",
        "moment": "2.24.0",
        "node-sass": "^4.13.1",
        "sass": "^1.23.7",
        "sass-loader": "^8.0.0",
        "ts-jest": "^25.2.1",
        "tslint": "5.16.0",
        "typescript": "3.4.5",
        "vee-validate": "2.2.7",
        "vue": "2.6.10",            
        "vue-class-component": "7.2.2",
        "vue-cli-plugin-vuetify": "^2.0.3",
        "vue-jest": "^3.0.5",
        "vue-property-decorator": "^8.4.0",
        "vue-router": "3.0.6",        
        "vue-template-compiler": "2.6.10",
        "vuejs-datepicker": "1.5.4",
        "vuetify": "^2.2.8",
        "vuex": "3.1.1",
        "vuex-persist": "^2.2.0",
        "vuex-typescript": "3.0.2"

Поскольку другие файлы работают, я публикую рабочий файл и файл, вызывающий проблемы, чтобы увидеть, есть ли очевидные проблемы с настройкой.

Рабочий тест

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";
export const DATE_FORMAT_YYYY_MM_DD = "YYYY-MM-DD";


@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, DATE_FORMAT_YYYY_MM_DD).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(DATE_FORMAT_YYYY_MM_DD) : null;
    }
}

Не рабочий тест

import Vue from 'vue';
import { Prop, Component, Watch, Inject } from 'vue-property-decorator'
import moment from 'moment';
import ItemService from 'common/items/ItemService';


@Component({
    components: {
        VendorLink: require("price/components/vendor/vendorLink/VendorLink.vue").default,
    }
})
export default class CatalogNumberHistory extends Vue {



    @Prop({ required: true })
    uin: number;

    @Inject("cglItemService")
    itemService: ItemService;

    public showReorderTooltip = false;
    public reorderContainerSize = "";
    public moment = moment;

    public itemCatalogHistory: CatalogHistory[] = [];
    loading: boolean = false;

    mounted() {

        this.getCatalogHistory();
    }

    public async getCatalogHistory() {
        try {

            this.loading = true;
            let result = await this.itemService.getv2ItemByUIN(this.uin);
            this.loading = false;

            if (result.success) {
                this.itemCatalogHistory = result.data.expiredCatalogNumbers;
            }
        }
        catch (error) {
            this.$snotify.error(error.message);
        }
    }
}

export interface CatalogHistory {
    expireDate: string;
    catalogNumber: number;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...