Vue + Mocha, 0 test passing if vue singlefile has <style> tag

Question

I am implementing VueJS in Ruby on Rails application, using webpacker and vueonrails gem, and I have troubles making tests of Vue implementation.

I have a bunch of .vue files using single file pattern. If I make test for files only containing and tags, all files of folder and subfolders are executing correctly, having other components with <style> tag without test file in same folder.

If I run the tests, the result is 45 test passing.

Then, If I write a test of one of that files with <style>, and run the tests again, it will execute without errors, but says 0 test passing, avoiding pass all test of the folder.

If I run a specific test of a file without <script> tag, it pass all tests of file normally, if I test the file with <script>, have 0 test passing.

I am using mochapack and ignore-styles to run with this command:

NODE_ENV=test mochapack --webpack-config config/webpack/test.js --require ignore-styles --require app/webpacker/src/test/setup.js --glob '*.spec.js' app/webpacker/src/components --recursive

I thing is something related to import Vue component in spec.js file, but I don't know how to solve it, and why is working with <template> + <script> files and not with <template> + <script> + <style> files.

Answer 1

Could you provide your test config? I had a similar issue, which was caused by the wrong configuration. In dev/prod env, styles were loaded by ruby gem, but the whole test env is run by node. So in test config, I had to add loaders for css:

environment.loaders.prepend('css', {
  test: /\.css$/,
  use: [
    'vue-style-loader',
    'css-loader',
    'sass-loader',
  ],
});