Jest Vuetify测试Webpack sass SyntaxError无效或意外的令牌@

问题描述

最好的说，这是运行笑话测试时的一个webpack问题。我已经获得了33个其他测试，可以使用vue的所有组件。这是vue应用程序的切入点，并且似乎处理方式有所不同。

• Vue版本：2.6.12
• Vuetify版本：2.3.10
• 笑话：24.9.0

package.json

{
// ...
"jest": {
    "modulefileExtensions": [
      "js","json","vue"
    ],"moduleNameMapper": {
      "^@/(.*)$": "<rootDir>/src/$1"
    },"transform": {
      ".*\\.(vue)$": "vue-jest","^.+\\.js$": "<rootDir>/node_modules/babel-jest"
    },"transformIgnorePatterns": [
      "node_modules/(?!vue-router|@babel|vuetify)"
    ],"collectCoverage": true,"collectCoverageFrom": [
      "**/*.{js,vue}","!**/*/node_modules/**","!**/*/assets/**","!**/coverage/**"
    ]
  }

在此文件中，我尝试在测试时将sass加载程序设置为空加载程序。导致了同样的问题。

vue.config.js

module.exports = {
  "publicPath": "./","transpileDependencies": [
    "vuetify"
  ],"chainWebpack": config => {
    config.module
      .rule('vue')
      .use('vue-loader')
      .loader('vue-loader')
      .tap(options => Object.assign(options,{
        transformAssetUrls: {
          'v-img': ['src','lazy-src'],'v-card': 'src','v-card-media': 'src','v-responsive': 'src',}
      }));
    if (process.env.NODE_ENV === 'test') {
      config.module.rule('sass').uses.clear();
      config.module.rule('sass').use('null-loaded').loader('null-loader');
    }
  },}

主要组件代码

import Vue from 'vue';

// to suppress warnings related to this https://github.com/vuetifyjs/vuetify/issues/9999
const ignoredMessage = "The .native modifier for v-on is only valid on components but it was used on <svg>.";

Vue.config.warnHandler = (message,vm,componentTrace) => {
    if (message !== ignoredMessage) {
        console.error(message + componentTrace);
    }
};


// resume
Vue.config.productionTip = false

import App from './App.vue';
import vuetify from './plugins/vuetify';
import Vuetify from "vuetify";
import { store } from "@/store/main";
import router from './plugins/vue-router'

Vue.use(Vuetify);

const moment = require('moment');
Vue.use(require('vue-moment'),{ moment })

import {mapActions} from "vuex";

export default new Vue({
  vuetify,store,router,render: h => h(App),methods: {
    ...mapActions(['getCurrentUser'])
  },mounted() {
    this.getCurrentUser();
  },}).$mount('#app')

测试代码

import main from './main';
// required for tests to run properly
import Vue from 'vue';
import Vuetify from "vuetify";
import VueRouter from 'vue-router';
import Vuex from 'vuex';
Vue.use(Vuetify);
Vue.use(VueRouter);
Vue.use(Vuex);

import {shallowMount,createLocalVue} from "@vue/test-utils";

const localVue = createLocalVue()


describe('main',() => {
  let vuetify;
  let store;

  beforeEach(() => {
    vuetify = new Vuetify();
    store = new Vuex.Store();
  });

  test('mounting the main view calls getCurrentUser',() => {
    // GIVEN a get current user is mocked
    const getCurrentUserMock = jest.fn();
    console.log('ENV: ' + process.env.NODE_ENV);

    // WHEN mounting the application
    shallowMount(main,{
      localVue,vuetify,methods: {
        getCurrentUser: getCurrentUserMock
      }
    });

    // THEN the current user is grabbed
    expect(getCurrentUserMock).toBeCalled();
  });

});

这是错误

Test suite Failed to run

..\a\node_modules\vuetify\src\components\VApp\VApp.sass:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){@import '../../styles/styles.sass'
                                                                                             ^
SyntaxError: Invalid or unexpected token
    at Runtime.createScriptFromCode (node_modules/jest/node_modules/jest-runtime/build/index.js:1270:14)
    at Object.<anonymous> (node_modules/vuetify/src/components/VApp/VApp.ts:2:1)

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）