Using 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 }]
]
};
Docs state that decorator plugin should be befor the class properties, which I'm doing. But I'm still getting this error
"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"
}
};
I added the class properties plugin due to an error I was having where it wouldn't transpile the public static variables on a class. Now it does that. But then it didn't like the decorator I had at the top. Ok, seems to be a plugin. That works, but now it doesn't like class properties again? Or is there yet another plugin to handle "normal" class properties?
The entire project setup is
- vue-property-decorator //where the decorators are coming from
- typescript
- vue
- vuetify
- some other minor libraries
- vue-cli //not using webpack directly though I imagine the vue-cli is using it
package.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"
Since other files are working, I'm posting a working file and the file causing issues to see if there's some obvious setup issue.
Working Test
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;
}
}
Not Working Test
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;
}