Intro Examples not working, Vue-Cli 3, fresh install

BUG

• version 1.11.0 package.json:

{
  "name": "cypress-test-3000",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "test:e2e": "vue-cli-service test:e2e"
  },
  "dependencies": {
    "vue": "^2.5.17"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.1.0",
    "@vue/cli-plugin-e2e-cypress": "^3.1.0",
    "@vue/cli-service": "^3.1.0",
    "cypress-vue-unit-test": "^1.11.0",
    "extract-text-webpack-plugin": "^4.0.0-beta.0",
    "vue-template-compiler": "^2.5.17"
  }

Terminal says

GET /__/ 200 18.770 ms - -
GET /__cypress/runner/cypress_runner.css 200 36.240 ms - -
GET /__cypress/runner/cypress_runner.js 200 281.366 ms - -
GET /__cypress/runner/fonts/fontawesome-webfont.woff2?v=4.6.3 200 1.661 ms - 71896
GET /__cypress/iframes/integration/test.js 200 6.710 ms - 709
(node:2412) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead
HEAD / 500 4527.223 ms - -
HEAD / 500 4537.110 ms - -
HEAD / 500 4543.925 ms - -

• platform Win 10, VS Code (Terminal is Git Bash),
• expected behavior to show at least the cypress logs
• actual behavior On cypress open or npm run test:e2e, clicking the spec -> chrome opens, not showing anything but “waiting on localhost”. Then after quite a while stops with “not tests found”

Additional Information: fresh install with vue-cli 3, intro examples from docs also don’t work, test.js

import mountVue from 'cypress-vue-unit-test';
import HelloWorld from '../../../src/components/HelloWorld.vue';

describe('HelloWorld', () => {
    beforeEach(mountVue(HelloWorld));

    describe('clicking the save button', () => {
        let spy;

        beforeEach(() => {
            spy = cy.spy();
            Cypress.vue.$on('save', spy);

            cy.get("[data-test='messageText']")
                .type('New message');

            cy.get("[data-test='saveButton']")
                .click();
        });

        it('clears the text field', () => {
            cy.get("[data-test='messageText']")
                .should('have.value', '');
        });

        it('emits the "save" event', () => {
            expect(spy).to.have.been.calledWith('New message');
        });
    });
});

[c0h1b4]

I think I solved it:

from https://learntdd.in/vue/

yarn add --dev cypress-vue-unit-test \
                 @cypress/webpack-preprocessor \
                 vue-loader

on the file tests/e2e/plugins/index.js

const webpack = require('@cypress/webpack-preprocessor');
const VueLoaderPlugin = require('vue-loader/lib/plugin');

const webpackOptions = {
  resolve: {
    extensions: ['.js', '.vue'],
  },
  plugins: [
    new VueLoaderPlugin(),
  ],
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
      },
    ],
  },
};

const options = {
  // send in the options from your webpack.config.js, so it works the same
  // as your app's code
  webpackOptions,
  watchOptions: {},
};

module.exports = (on, config) => {
  on('file:preprocessor', webpack(options));
  return Object.assign({}, config, {
    fixturesFolder: 'tests/e2e/fixtures',
    integrationFolder: 'tests/e2e/specs',
    screenshotsFolder: 'tests/e2e/screenshots',
    videosFolder: 'tests/e2e/videos',
    supportFile: 'tests/e2e/support/index.js',
  });
};

Then run “yarn test:e2e” again and component tests should work…

[paxcodes]

@sebastianjung you have to add a css loader in the webpack config to properly compile them.

...
 rules: [
   ...
     {
        test: /\.css$/,
        use: ["vue-style-loader", "css-loader"]
      }
...

Check out the vue-loader documentation for more info.