[Bug Report] Vuetify cli plugin breaks mocha tests #101

JamesMcMahon · 2019-07-30T19:35:08Z

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

The text was updated successfully, but these errors were encountered:

JamesMcMahon · 2019-07-30T19:37:33Z

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 · 2019-07-31T00:24:17Z

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 · 2019-07-31T01:10:48Z

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

nekosaur · 2019-07-31T08:15:40Z

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 · 2019-08-07T12:54:28Z

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 · 2019-08-07T13:46:23Z

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 · 2019-09-13T13:24:39Z

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 · 2019-10-07T02:01:53Z

@johnleider Thanks John!

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

JamesMcMahon · 2019-10-13T17:20:59Z

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.

See vuetifyjs/vue-cli-plugins#101

Fix issue in vuetifyjs#101

Fix issue in vuetifyjs#101 On the fresh project adding the `vue add vuetify` plugin results in a missing dependency: ``` 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' ```

M3psipax · 2020-06-05T11:58:55Z

I still have this issue with with vue ^2.6.11 and vue-cli-service ~4.4.0 and vue-cli-plugin-vuetify ~2.0.5.

None of the solutions provided worked for me. I had to install null-loader first. Now, I get the sass import failures.

Actually, I just realized it's not entirely the same issue since the error reads "SassError: Can't find stylesheet to import."

Edit 1: So for anyone else struggling with this, I was able to resolve it like this:

Use https://www.npmjs.com/package/ignore-styles and https://www.npmjs.com/package/ignore-loader.

Add --require ignore-styles to your unit test command.

Then put into your vue.config.js:

if (process.env.NODE_ENV === "test") {
config.module
        .rule("ignore-vuetify-styles")
        .test(/\.(sass|scss)/)
        .include.add(path.resolve(__dirname, "node_modules/vuetify"))
        .end()
        .use("ignore-loader")
        .loader("ignore-loader")
        .end();
 }

Edit 2:

Forget all of the above!

For anyone coming across this: I still encountered some issues after configuring to ignore styles. So I did some more digging, and it turns out that my tests broke because I had in my vue.config.js:

css: { extract: { ignoreOrder: true}}

For some reason, this causes the ExtractCssPlugin to fail in tests, presumably because the extract object overwrites the base configuration completely.

So I just did:

  css:
    process.env.NODE_ENV === "production"
      ? {
          extract: { ignoreOrder: true },
        }
      : undefined,

Now I've got everything working without any need for additional plugins or requires by simply using vue-cli-service test:unit as is.

fixes #101

xiaohundun · 2020-12-03T13:09:03Z

I still have this issue with with vue ^2.6.11 and vue-cli-service ~4.4.0 and vue-cli-plugin-vuetify ~2.0.5.

None of the solutions provided worked for me. I had to install null-loader first. Now, I get the sass import failures.

Actually, I just realized it's not entirely the same issue since the error reads "SassError: Can't find stylesheet to import."

Edit 1: So for anyone else struggling with this, I was able to resolve it like this:

Use https://www.npmjs.com/package/ignore-styles and https://www.npmjs.com/package/ignore-loader.

Add --require ignore-styles to your unit test command.

Then put into your vue.config.js:
if (process.env.NODE_ENV === "test") {
config.module
        .rule("ignore-vuetify-styles")
        .test(/\.(sass|scss)/)
        .include.add(path.resolve(__dirname, "node_modules/vuetify"))
        .end()
        .use("ignore-loader")
        .loader("ignore-loader")
        .end();
 }
Edit 2:

Forget all of the above!

For anyone coming across this: I still encountered some issues after configuring to ignore styles. So I did some more digging, and it turns out that my tests broke because I had in my vue.config.js:
css: { extract: { ignoreOrder: true}}
For some reason, this causes the ExtractCssPlugin to fail in tests, presumably because the extract object overwrites the base configuration completely.

So I just did:
  css:
    process.env.NODE_ENV === "production"
      ? {
          extract: { ignoreOrder: true },
        }
      : undefined,
Now I've got everything working without any need for additional plugins or requires by simply using vue-cli-service test:unit as is.

saved my life!!!!thanks!!!!

KaelWD transferred this issue from vuetifyjs/vuetify Jul 31, 2019

JamesMcMahon mentioned this issue Jul 31, 2019

[Bug Report] SASS cannot compile due to missing semicolons vuetifyjs/vuetify#8183

Closed

johnleider closed this as completed in 9169fac Oct 6, 2019

kkerstges pushed a commit to kkerstges/smart-chicken-coop that referenced this issue Jan 2, 2020

remove runner vue unit tests break if vuetify is used

fb80321

See vuetifyjs/vue-cli-plugins#101

JamesMcMahon added a commit to JamesMcMahon/vue-cli-plugins that referenced this issue Jan 18, 2020

Add missing null-loader dependency

62e04a2

Fix issue in vuetifyjs#101

JamesMcMahon mentioned this issue Jan 18, 2020

fix: add missing null-loader dependency #152

Merged

po-trottier mentioned this issue Jan 18, 2020

Fix Mocha Unit Tests po-trottier/concordia-instaclone#1

Closed

KaelWD pushed a commit that referenced this issue Jul 20, 2020

fix: add missing null-loader dependency (#152)

983a796

fixes #101

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Bug Report] Vuetify cli plugin breaks mocha tests #101

[Bug Report] Vuetify cli plugin breaks mocha tests #101

JamesMcMahon commented Jul 30, 2019 •

edited

Loading

JamesMcMahon commented Jul 30, 2019

JamesMcMahon commented Jul 31, 2019 •

edited

Loading

KaelWD commented Jul 31, 2019

nekosaur commented Jul 31, 2019 •

edited

Loading

turdwaster commented Aug 7, 2019 •

edited

Loading

JamesMcMahon commented Aug 7, 2019

EtienneM commented Sep 13, 2019 •

edited

Loading

JamesMcMahon commented Oct 7, 2019

JamesMcMahon commented Oct 13, 2019 •

edited

Loading

M3psipax commented Jun 5, 2020 •

edited

Loading

xiaohundun commented Dec 3, 2020

[Bug Report] Vuetify cli plugin breaks mocha tests #101

[Bug Report] Vuetify cli plugin breaks mocha tests #101

Comments

JamesMcMahon commented Jul 30, 2019 • edited Loading

Environment

Steps to reproduce

Vue create options

Expected Behavior

Actual Behavior

Reproduction Link

JamesMcMahon commented Jul 30, 2019

JamesMcMahon commented Jul 31, 2019 • edited Loading

KaelWD commented Jul 31, 2019

nekosaur commented Jul 31, 2019 • edited Loading

turdwaster commented Aug 7, 2019 • edited Loading

JamesMcMahon commented Aug 7, 2019

EtienneM commented Sep 13, 2019 • edited Loading

JamesMcMahon commented Oct 7, 2019

JamesMcMahon commented Oct 13, 2019 • edited Loading

M3psipax commented Jun 5, 2020 • edited Loading

xiaohundun commented Dec 3, 2020

JamesMcMahon commented Jul 30, 2019 •

edited

Loading

JamesMcMahon commented Jul 31, 2019 •

edited

Loading

nekosaur commented Jul 31, 2019 •

edited

Loading

turdwaster commented Aug 7, 2019 •

edited

Loading

EtienneM commented Sep 13, 2019 •

edited

Loading

JamesMcMahon commented Oct 13, 2019 •

edited

Loading

M3psipax commented Jun 5, 2020 •

edited

Loading