使用vuejs-datepicker运行Jest测试时出错

Question

我正在用我的tests应用程序学习Jest，除了在我的一个components中我使用的是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()
    })
})

误差

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

Jest遇到了一个意想不到的标记--这通常意味着您试图导入Jest无法解析的文件，例如，它不是普通的JavaScript。默认情况下，如果Jest看到一个Babel配置，它将使用该配置来转换您的文件，而忽略"node_modules“。下面是您可以做的事情：·要转换一些"node_modules“文件，您可以在配置中指定一个自定义的"transformIgnorePatterns”。·如果需要自定义转换，请在配置中指定一个"transform“选项。·如果您只想模拟非JS模块(例如二进制资产)，可以使用"moduleNameMapper“配置将它们存根

选项。

您将在文档中找到更多有关这些配置选项的详细信息和示例: C:\Users\anton\Desktop\testProject\vueproject\node_modules\vuejs-datepicker\dist\vuejs-datepicker.esm.js:2437 Details："vuejs-datepicker/dist/vuejs-datepicker.esm.js"；导出默认数据报警器；^ SyntaxError:意外令牌的导出‘116-117-118号从“vuejs-datepicker/dist/vuejs-datepicker.esm.js”；\^ 119 // https://jestjs.io/docs/en/configuration.html *导入数据报警器，如lang从“vuejs/src/locale”；120从“./mixins/ globalVars”导入globalVars；从‘./loader.vue’导入121个globalVars；从ScriptTransformer.transform (node_modules/@jest/transform/build/ScriptTransformer.js:579:25)在src/components/addBlog.vue:118:1导入globalVars。(src/components/addBlog.vue:232:3)

Package.json

{
  "name": "vueproject",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "test:unit": "vue-cli-service test:unit --watch",
    "test:e2e": "vue-cli-service test:e2e",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "apexcharts": "^3.16.0",
    "core-js": "^3.6.4",
    "firebase": "^7.9.3",
    "vue": "^2.6.11",
    "vue-apexcharts": "^1.5.2",
    "vue-moment": "^4.1.0",
    "vue-router": "^3.1.6",
    "vuefire": "^2.2.1",
    "vuejs-datepicker": "^1.6.2",
    "vuex": "^3.1.2"
  },
  "devDependencies": {
    "@babel/core": "^7.8.7",
    "@babel/preset-env": "^7.8.7",
    "@vue/cli-plugin-babel": "~4.2.0",
    "@vue/cli-plugin-e2e-cypress": "~4.2.0",
    "@vue/cli-plugin-eslint": "~4.2.0",
    "@vue/cli-plugin-router": "~4.2.0",
    "@vue/cli-plugin-unit-jest": "~4.2.0",
    "@vue/cli-plugin-vuex": "~4.2.0",
    "@vue/cli-service": "~4.2.0",
    "@vue/test-utils": "1.0.0-beta.31",
    "babel-eslint": "^10.0.3",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.1.2",
    "vue-template-compiler": "^2.6.11"
  }
}

Jest.config

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

AddBlog.vue

<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'
.......

Answer 1

当您运行测试时，Jest尝试在lib DatePicker中找到css文件，您应该对它进行模拟。

按照以下步骤：

mkdir tests/__mocks__/ && touch tests/__mocks__/styleMock.js 

注意:文件styleMock.js将保持为空，因为该文件将模拟tmp文件。

之后，您需要在jest.config.js中添加配置

  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/src/$1',
    '\\.(css|less|sass|scss)$': '<rootDir>/tests/__mocks__/styleMock.js',
  },

最后，尝试再次运行测试=)