sass-loader issues for scss styled components

[alibombaye]

Hello,

I've created a simple nuxt app with a couple of pages and a couple of simple components.

I've been able to successfully use @nuxt/test-util to integrate test these pages. However, soon as I change the style lang of one of the components from css to scss. It no longer passes. The test fail to run and I get the following error in the setupTest;

    console.error
      ## There is an issue with `node-fibers` ##
      `/Users/xxxxx/learning/vue/nuxt-playground/node_modules/fibers/bin/darwin-x64-83/fibers.node` is missing.
      
      Try running this to fix the issue: /usr/local/Cellar/node/14.9.0/bin/node /Users/fawad.ali/learning/vue/nuxt-playground/node_modules/fibers/build

      at Object.<anonymous> (node_modules/fibers/fibers.js:17:11)
      at getSassOptions (node_modules/sass-loader/dist/utils.js:140:25)
      at Object.loader (node_modules/sass-loader/dist/index.js:43:55)
      at LOADER_EXECUTION (node_modules/webpack/node_modules/loader-runner/lib/LoaderRunner.js:119:14)

The app runs fine and the component does successfully style correctly when using scss.

I'm bit lost as to what could be going wrong here. I've installed [email protected] since that seems to be the required loader.

My jest.config.js currently looks like this;

module.exports = {
  preset: '@nuxt/test-utils',
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/src/$1'
  },
  moduleFileExtensions: [
    'ts',
    'js',
    'vue',
    'json'
  ],
  transform: {
    "^.+\\.ts$": "ts-jest",
    '^.+\\.js$': 'babel-jest',
    '.*\\.(vue)$': 'vue-jest',
    '.+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$':
      'jest-transform-stub',
  },
  globals: {
    "vue-jest": {
      "hideStyleWarn": true,
      "experimentalCSSCompile": true,
      "resources": {
        "scss": [
          './assets/scss/main.scss'
        ]
      }
    }
  },
  transformIgnorePatterns: [
    'node_modules/(?!(nuxt-i18n)/)'
  ],
  collectCoverage: true,
  collectCoverageFrom: [
    '<rootDir>/components/**/*.vue',
    '<rootDir>/pages/**/*.vue'
  ],
  setupFiles: [
    '<rootDir>/jest.init.js'
  ],
  testEnvironment: 'jsdom',
  testMatch: ['**/?(*.)+(spec|test).[tj]s?(x)']
}

Any help would be appreciated

[mrazauskas]

@alibombaye I could try to help you. Could you tell more what are you trying to test? How does your test look like?

It seems like your jest.config.js is mixing Jest setup for Vue Test Utils and Nuxt Test Utils. These are complimentary tools with different aim. The first one is made to unit test Vue components in browser-like environment and the latter one helps to set up your app for end-to-end testing in node-like environment. setupTest will build your app programmatically and will serve the build artefact (files found in .nuxt directory). Nuxt Test Utils does not test the actual files you have written, it is just using them to build the app.

From what you wrote, it seem like the app is building correctly. So it is not clear where the error comes from?

Back to jest.config.js. It is the best to have separate configuration for both Vue Test Utils and Nuxt Test Utils. Simply take a look at the preset of Nuxt Test Utils. Your jest.config.js is overriding the values of the preset. Simply create jest.config.e2e.js only for Nuxt Test Utils, add the preset there, move your end-to-end tests to a separate directory test/e2e and now you can run them by calling jest test/e2e -c jest.config.e2e.js.

[alibombaye]

Hello @mrazauskas for your response.

That was my first attempt to split out the jest.configs. One for the unit tests and the other for the nuxt tests. However, it didn't seem to make any difference. I kept getting the same error. I narrowed it down to the scss issue. Regardless, I have made some progress since I posted this initially.

I've updated my nuxt.config.js to include the following;

const Sass = require("sass")

const customSass = {
  implementation: Sass,
  sassOptions: {
    fiber: false
  }
}

and

  build: {
    loaders: {
      scss: customSass
    }
  }

For some reasons it looks like you have to explicitly set the sass-loader in the nuxt.config.js in order for jest to know what to use. I must admit I do not fully understand why this works. But with this I was able to run the tests including components that contained scss style.