Vue.js 使用vuejs日期选择器运行Jest测试时出错

我正在用我的test Vue应用程序学习Jest，一切正常，但在我的一个

组件中

我正在使用

vuejs datepicker

，当我运行下面的测试时，我得到了下面的错误，我似乎无法解决

测试文件

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

import ShowBlogs from '@/components/showBlogs.vue'
import ActiveBlogs from '@/components/blogsActive.vue'
import AddBlog from '@/components/addBlog.vue'
import ClosedBlogs from '@/components/blogsClosed.vue'

describe('ShowBlogs.vue tests', () => {
    let wrapper = null

    beforeEach(() => {
        wrapper = mount(ShowBlogs)
    })

    afterEach(() => {
        wrapper.destroy()
    })

    it('Checks "ShowBlogs" component rendered', () => {
        expect(wrapper.name()).toMatch('ShowBlogs')
    })

    it('Checks "Active" tab displayed on load', () => {
        expect(wrapper.find(ActiveBlogs).exists()).toBeTruthy()
    })

    it('Checks tab labels & correct tab has "Active" class', () => {
        expect(wrapper.find('h1').text()).toEqual('Articles')

        expect(wrapper.findAll('li').length).toEqual(3)
        expect(wrapper.findAll('li').at(0).text()).toEqual('Active blogs')
        expect(wrapper.findAll('li').at(1).text()).toEqual('Closed blogs')
        expect(wrapper.findAll('li').at(2).text()).toEqual('Add a new blog')

        expect(wrapper.find('#activeBlogs-tab').classes()).toContain('active')
    })

    it('Checks "ClosedBlogs" component displayed when clicking "Closed Blogs tab"', () => {
        wrapper.find('#closedBlogs-tab').trigger('click')
        expect(wrapper.find(ClosedBlogs).exists()).toBeTruthy()
    })
})

<script>
import Datepicker from "vuejs-datepicker/dist/vuejs-datepicker.esm.js";
import globalVars from "../mixins/globalVars";
import loader from './loader.vue';
import moment from 'moment'
.......

错误

失败测试/unit/showBlogs.vue.spec.js● 测试套件无法运行

Jest encountered an unexpected token

This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.

By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".

Here's what you can do:
 • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.    
 • If you need a custom transformation specify a "transform" option in your config.
 • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config 

选择权

You'll find more details and examples of these config options in the docs:
https://jestjs.io/docs/en/configuration.html

Details:

C:\Users\anton\Desktop\testProject\vueproject\node_modules\vuejs-datepicker\dist\vuejs-datepicker.esm.js:2437
export default Datepicker;
^^^^^^

SyntaxError: Unexpected token 'export'

  116 | 
  117 | <script>
> 118 | import Datepicker from "vuejs-datepicker/dist/vuejs-datepicker.esm.js";
      | ^
  119 | //import * as lang from "vuejs-datepicker/src/locale";
  120 | import globalVars from "../mixins/globalVars";
  121 | import loader from './loader.vue';

  at ScriptTransformer._transformAndBuildScript (node_modules/@jest/transform/build/ScriptTransformer.js:537:17)
  at ScriptTransformer.transform (node_modules/@jest/transform/build/ScriptTransformer.js:579:25)
  at src/components/addBlog.vue:118:1
  at Object.<anonymous> (src/components/addBlog.vue:232:3)

Jest.config

module.exports = {
  preset: '@vue/cli-plugin-unit-jest'
}

AddBlog.vue

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

import ShowBlogs from '@/components/showBlogs.vue'
import ActiveBlogs from '@/components/blogsActive.vue'
import AddBlog from '@/components/addBlog.vue'
import ClosedBlogs from '@/components/blogsClosed.vue'

describe('ShowBlogs.vue tests', () => {
    let wrapper = null

    beforeEach(() => {
        wrapper = mount(ShowBlogs)
    })

    afterEach(() => {
        wrapper.destroy()
    })

    it('Checks "ShowBlogs" component rendered', () => {
        expect(wrapper.name()).toMatch('ShowBlogs')
    })

    it('Checks "Active" tab displayed on load', () => {
        expect(wrapper.find(ActiveBlogs).exists()).toBeTruthy()
    })

    it('Checks tab labels & correct tab has "Active" class', () => {
        expect(wrapper.find('h1').text()).toEqual('Articles')

        expect(wrapper.findAll('li').length).toEqual(3)
        expect(wrapper.findAll('li').at(0).text()).toEqual('Active blogs')
        expect(wrapper.findAll('li').at(1).text()).toEqual('Closed blogs')
        expect(wrapper.findAll('li').at(2).text()).toEqual('Add a new blog')

        expect(wrapper.find('#activeBlogs-tab').classes()).toContain('active')
    })

    it('Checks "ClosedBlogs" component displayed when clicking "Closed Blogs tab"', () => {
        wrapper.find('#closedBlogs-tab').trigger('click')
        expect(wrapper.find(ClosedBlogs).exists()).toBeTruthy()
    })
})

<script>
import Datepicker from "vuejs-datepicker/dist/vuejs-datepicker.esm.js";
import globalVars from "../mixins/globalVars";
import loader from './loader.vue';
import moment from 'moment'
.......

从“vuejs Datepicker/dist/vuejs Datepicker.esm.js”导入Datepicker；
从“./mixins/globalVars”导入globalVars；
从“/loader.vue”导入加载程序；
从“时刻”导入时刻
.......