[Bug Report] Vuetify cli plugin breaks mocha tests

[JamesMcMahon]

Environment

Vuetify Version: 2.0.3
Vue Version: 2.6.10
Browsers: Chrome 75.0.3770.100
OS: Mac OS 10.14.5

Steps to reproduce

Run yarn test:unit

Project was generated using

vue create vuetify-create-test
cd vuetify-create-test/
vue add vuetify

Vue create options

Customized to add mocha tests:

Defaults are selected for every other option

Expected Behavior

Tests will run

Actual Behavior

Tests break with sass compilation issue:

WEBPACK  Failed to compile with 4 error(s)

Error in ./node_modules/vuetify/src/components/VGrid/VGrid.sass

  Module build failed (from ./node_modules/sass-loader/lib/loader.js):
  Expected ";".
    ╷
  1 │ @import './settings/_index'
    │                            ^
    ╵
    Users/james/workspace/vuetify-create-test/node_modules/vuetify/src/styles/styles.sass 1:28  @import
    stdin 1:9                                                                                   root stylesheet
        in http:/localhost/Users/james/workspace/vuetify-create-test/node_modules/vuetify/src/styles/styles.sass (line 1, column 28)

Error in ./node_modules/vuetify/src/components/VGrid/_grid.sass

  Module build failed (from ./node_modules/sass-loader/lib/loader.js):
  Expected ";".
    ╷
  1 │ @import './settings/_index'
    │                            ^
    ╵
    Users/james/workspace/vuetify-create-test/node_modules/vuetify/src/styles/styles.sass 1:28  @import
    stdin 1:9                                                                                   root stylesheet
        in http:/localhost/Users/james/workspace/vuetify-create-test/node_modules/vuetify/src/styles/styles.sass (line 1, column 28)

Error in ./node_modules/vuetify/src/components/VImg/VImg.sass

  Module build failed (from ./node_modules/sass-loader/lib/loader.js):
  Expected ";".
    ╷
  1 │ @import './settings/_index'
    │                            ^
    ╵
    Users/james/workspace/vuetify-create-test/node_modules/vuetify/src/styles/styles.sass 1:28  @import
    stdin 1:9                                                                                   root stylesheet
        in http:/localhost/Users/james/workspace/vuetify-create-test/node_modules/vuetify/src/styles/styles.sass (line 1, column 28)

Error in ./node_modules/vuetify/src/components/VResponsive/VResponsive.sass

  Module build failed (from ./node_modules/sass-loader/lib/loader.js):
  Expected ";".
    ╷
  1 │ @import './settings/_index'
    │                            ^
    ╵
    Users/james/workspace/vuetify-create-test/node_modules/vuetify/src/styles/styles.sass 1:28  @import
    stdin 1:9                                                                                   root stylesheet
        in http:/localhost/Users/james/workspace/vuetify-create-test/node_modules/vuetify/src/styles/styles.sass (line 1, column 28)

Reproduction Link

https://github.com/JamesMcMahon/vuetify-create-issues

[JamesMcMahon]

Happy to give any more information needed, but out of the box this is broken.

Same issue as vuetifyjs/vuetify#8183 but I added a repo with the issue.

[JamesMcMahon]

Not sure what may be going on here, I tried adding some additional setup to the tests as described in the upgrade guide,

ie,

// setup.js

import Vue from 'vue'
import Vuetify from 'vuetify'

Vue.use(Vuetify)

// example.spec.js

import { expect } from 'chai'
import { createLocalVue, shallowMount } from '@vue/test-utils'
import HelloWorld from '@/components/HelloWorld.vue'
import Vuetify from 'vuetify'

const localVue = createLocalVue()

describe('HelloWorld.vue', () => {
  let vuetify

  beforeEach(() => {
    vuetify = new Vuetify()
  })

  it('renders props.msg when passed', () => {
    const msg = 'new message'
    const wrapper = shallowMount(HelloWorld, {
      propsData: { msg },
      localVue,
      vuetify
    })
    expect(wrapper.text()).to.include(msg)
  })
})

No luck, I get the same error.

I was thinking that for some reason that a scss compiler was being invoked instead of sass, but debugging around the error into ./node_modules/sass-loader/lib/loader.js leads to an implementation.info set to "dart-sass 1.22.9 (Sass Compiler) [Dart] dart2js 2.4.0 (Dart Compiler) [Dart]".

[KaelWD]

http://zinserjan.github.io/mocha-webpack/docs/installation/cli-usage.html

[nekosaur]

You can use null-loader together with the following in vue.config.js

  chainWebpack: config => {
    if (process.env.NODE_ENV === 'test') {
      const sassRule = config.module.rule('sass')
      sassRule.uses.clear()
      sassRule.use('null-loader').loader('null-loader')
    }
  }

[turdwaster]

In my case, after upgrading a project to Vuetify 2, the error is Can't find stylesheet to import. on the line @import '../../styles/styles.sass' for all components in ./node_modules/vuetify/src/components/. I can confirm that using the null-loader from previous comment works around the issue. Normal builds work fine though.

[JamesMcMahon]

You can use null-loader together with the following in vue.config.js

  chainWebpack: config => {
    if (process.env.NODE_ENV === 'test') {
      const sassRule = config.module.rule('sass')
      sassRule.uses.clear()
      sassRule.use('null-loader').loader('null-loader')
    }
  }

I can confirm this works for my project. Haven't gotten a chance to try it out on the minimal example in my repo yet, but I would assume it would work as well since they were demonstrating the same issue.

[EtienneM]

This one bugged me for some times. I actually had to slightly modify the suggested solution with:

  chainWebpack: (config) => {
    if (process.env.NODE_ENV === 'test') {
      const sassRule = config.module.rule('sass')
      sassRule.uses.clear()
      sassRule.use('null-loader').loader('null-loader')
      const scssRule = config.module.rule('scss')
      scssRule.uses.clear()
      scssRule.use('null-loader').loader('null-loader')
    }
    // Allow to mix SASS and SCSS
    // https://vuetifyjs.com/en/customization/sass-variables#single-file-components
    ['vue-modules', 'vue', 'normal-modules', 'normal'].forEach((match) => {
      config.module.rule('scss').oneOf(match).use('sass-loader')
        .tap(opt => Object.assign(opt, { data: '@import "~@/styles/application.scss";' }))
    })
  },

I think that this documentation page should be updated to mention this.

Thanks a lot @nekosaur!

[JamesMcMahon]

@johnleider Thanks John!

Once this is released I can test this on my example project

[JamesMcMahon]

Testing this fix post release.

Using vue-cli version 3.12.0 and running the reproduction steps above I still have issues around the null loader.

Running yarn test:unit outputs:

WEBPACK  Failed to compile with 9 error(s)

Error in ./node_modules/vuetify/lib/components/VImg/VImg.js

  Module not found: 'null-loader' in '/Users/jamie/temp/vuetify-create-test'

Error in ./node_modules/vuetify/lib/components/VGrid/VContainer.js

  Module not found: 'null-loader' in '/Users/jamie/temp/vuetify-create-test'

Error in ./node_modules/vuetify/lib/components/VGrid/VLayout.js

  Module not found: 'null-loader' in '/Users/jamie/temp/vuetify-create-test'

Error in ./node_modules/vuetify/lib/components/VGrid/VSpacer.js

  Module not found: 'null-loader' in '/Users/jamie/temp/vuetify-create-test'

Error in ./node_modules/vuetify/lib/components/VGrid/VFlex.js

  Module not found: 'null-loader' in '/Users/jamie/temp/vuetify-create-test'

Error in ./node_modules/vuetify/lib/components/VGrid/VContainer.js

  Module not found: 'null-loader' in '/Users/jamie/temp/vuetify-create-test'

Error in ./node_modules/vuetify/lib/components/VGrid/VCol.js

  Module not found: 'null-loader' in '/Users/jamie/temp/vuetify-create-test'

Error in ./node_modules/vuetify/lib/components/VGrid/VRow.js

  Module not found: 'null-loader' in '/Users/jamie/temp/vuetify-create-test'

Error in ./node_modules/vuetify/lib/components/VResponsive/VResponsive.js

  Module not found: 'null-loader' in '/Users/jamie/temp/vuetify-create-test'

 ERROR  mocha-webpack exited with code 1.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Running yarn add -D null-loader fixes the compilation issue but still has a broken test:

WEBPACK  Compiled successfully in 2437ms

MOCHA  Testing...



 HelloWorld.vue
   1) renders props.msg when passed


 0 passing (145ms)
 1 failing

 1) HelloWorld.vue
      renders props.msg when passed:
    AssertionError: expected 'Welcome to Vuetify\n      \n        For help and collaboration with other Vuetify developers,\n        please join our online\n        Discord CommunityWhat\'s next?\n          Explore components\n        \n          Select a layout\n        \n          Frequently Asked Questions\n        Important Links\n          Documentation\n        \n          Chat\n        \n          Made with Vuetify\n        \n          Twitter\n        \n          Articles\n        Ecosystem\n          vuetify-loader\n        \n          github\n        \n          awesome-vuetify' to include 'new message'
     at Context.<anonymous> (dist/webpack:/tests/unit/example.spec.js:11:1)
     at processImmediate (internal/timers.js:439:21)

I wanted to report this here to keep it attached to the original issue that we were attempting to fix but if it easier for you to open a new let me know.