时间戳

首页 > 解决方案 > “意外的令牌 <” 将 'npm test' 与 vue-dropdowns 和 Vue + jest 一起使用

unit-testing - “意外的令牌 <” 将 'npm test' 与 vue-dropdowns 和 Vue + jest 一起使用

问题描述

我不断收到来自开玩笑的错误消息“SyntaxError: Unexpected token <”

开玩笑测试错误

这是我在spec.js文件中的测试。

import { shallowMount, createLocalVue } from '@vue/test-utils'
import promotionsForm from '@/components/promotions/PromotionsForm.vue'
import router from '@/router';

const localVue = createLocalVue();

jest.mock('@/store')
jest.mock('@/helpers', () => {
   return {
       startDate: jest.fn().mockReturnValue(
         new Date(Date.now())
       ),
       Helper: {
         getCountryCurrencyCode () {
           return 'USD'
         }
       }
   }
})


describe('promotionsForm.vue', () => {
  it('Past dates should be disabled', () => {
      const wrapper = shallowMount(promotionsForm, {localVue, router})
      expect(wrapper.find('.date-inline-picker:first-child input').exists()).toBe(true)
  })
})

这是我的jest.config.js设置

 module.exports = {
  moduleFileExtensions: ['js', 'json', 'vue', 'html'],
  transform: {
    '^.+\\.vue$': 'vue-jest',
    '.+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$': 'jest-transform-stub',
    '^.+\\.js$': 'babel-jest',
    '^.+\\.html?$': 'html-loader-jest'
  },
  transformIgnorePatterns: [
    '/node_modules/'
  ],
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/src/$1'
  },
  snapshotSerializers: ['<rootDir>/node_modules/jest-serializer-vue'],
  setupFiles: ['<rootDir>/test/unit/setup'],
  testMatch: ['**/test/unit/**/*.spec.js'],
  coverageDirectory: '<rootDir>/test/unit/coverage',
  collectCoverageFrom: [
    'src/**/*.{js,vue}',
    '!src/main.js',
    '!src/router/index.js',
    '!**/node_modules/**'
  ]
 }

我错过了什么或做错了什么？

标签： unit-testingvuejs2jestjsbabel-jest

解决方案

在我看来，问题在于 babel 没有设置为转换你的 vue 文件。

没有看到设置很难提出具体的建议，但我建议你阅读这里的文档：https://vue-test-utils.vuejs.org/guides/testing-single-file-components-with-jest。 html

推荐阅读