Как настроить jest и babel для работы с vue? - PullRequest
Новая
       36

Как настроить jest и babel для работы с vue?

0 голосов
/ 19 марта 2020

Я добавляю шутки в свой проект и не могу правильно его настроить.

Когда я запускаю $ jest, я получаю SyntaxError: Cannot use import statement outside a module.

Я искал в течение долгого времени для решения, но никто не работал ...

Может кто-нибудь, пожалуйста, помогите мне настроить Jest и Babel?

Вот мои файлы:

пакет . json

{
  "name": "psyque-frontend",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "test": "jest"
  },
  "dependencies": {
    "actioncable-vue": "^1.5.1",
    "axios": "^0.19.2",
    "chart.js": "^2.9.3",
    "material-design-icons-iconfont": "^5.0.1",
    "qs": "^6.9.1",
    "vue": "^2.6.11",
    "vue-axios": "^2.1.5",
    "vue-chartjs": "^3.5.0",
    "vue-router": "^3.1.6",
    "vuetify": "^1.5.21",
    "vuetify-datetime-picker": "^1.1.3"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.12.1",
    "@vue/cli-plugin-eslint": "^3.12.1",
    "@vue/cli-service": "^3.12.1",
    "@vue/test-utils": "^1.0.0-beta.32",
    "babel-eslint": "^10.1.0",
    "babel-jest": "^25.1.0",
    "eslint": "^5.16.0",
    "eslint-plugin-vue": "^5.2.3",
    "jest": "^25.1.0",
    "stylus": "^0.54.7",
    "stylus-loader": "^3.0.1",
    "ts-jest": "^25.2.1",
    "vue-cli-plugin-vuetify": "^0.6.3",
    "vue-jest": "^3.0.5",
    "vue-template-compiler": "^2.6.11",
    "vuetify-loader": "^1.4.3"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "rules": {},
    "parserOptions": {
      "parser": "babel-eslint"
    }
  },
  "postcss": {
    "plugins": {
      "autoprefixer": {}
    }
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]
}

jest.config. js

module.exports = {
  moduleFileExtensions: ['js', 'json', 'ts', 'vue'],
  transform: {
    '.*\\.(js|jsx)$': 'babel-jest',
    '.*\\.(ts|tsx)?$': 'ts-jest',
    '.*\\.(vue)$': 'vue-jest'
  },
  verbose: true
};

babel.config. js

module.exports = {
  presets: [
    '@vue/app'
  ]
};

Footer.test. js

import { mount } from '@vue/test-utils'
import Footer from './Footer'

describe('Footer', () => {
  test('is a Vue instance', () => {
    const wrapper = mount(Footer);
    expect(wrapper.isVueInstance()).toBeTruthy();
  })
});

Большое спасибо за вашу поддержку!

...