Cypress: Cypress ignores specs

[warren-sadler]

Current behavior:

Cypress seems to recognize the spec files...

However, it can't seem to find the test cases within.

But there are totally tests.

Here is the corresponding stack

GET /__cypress/tests?p=tests/e2e/support/index.js-881 - - ms - -
GET /__cypress/tests?p=tests/e2e/specs/test.js-308 - - ms - -
GET /__cypress/iframes/integration/test.js 200 2.001 ms - 709
GET /__cypress/tests?p=tests/e2e/support/index.js-374 - - ms - -
GET /__cypress/tests?p=tests/e2e/specs/test.js-189 - - ms - -
GET /__cypress/iframes/integration/test.js 200 1.094 ms - 709
GET /__cypress/tests?p=tests/e2e/support/index.js-110 200 34.451 ms - -
GET /__cypress/tests?p=tests/e2e/specs/test.js-975 200 33.804 ms - -
GET /service-worker.js 200 4.864 ms - -
HEAD / 500 67.941 ms - -
HEAD / 500 48.766 ms - -
HEAD / 500 48.730 ms - -

Desired behavior:

I would hope the test would run, cypress would run my test-cases.

Steps to reproduce:

1. Clone: https://github.com/warren-sadler/example-cypress-error
2. npm install
   3.npm run test:e2e

Versions

Cypress 3.1.0, MacOS 10.13.6, Chrome 69

[chrisbreiding]

If you open the browser DevTools, are there any errors in the console?

[warren-sadler]

Before

// https://docs.cypress.io/guides/guides/plugins-guide.html
const webpack = require('@cypress/webpack-preprocessor')

module.exports = (on, config) => {
  on('file:preprocessor', webpack({
    webpackOptions: require('@vue/cli-service/webpack.config'),
    watchOptions: {}
  }))

  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'
  })
}

Removing this line: webpackOptions: require('@vue/cli-service/webpack.config') from the exports seems to address the issue.

After

// https://docs.cypress.io/guides/guides/plugins-guide.html
const webpack = require('@cypress/webpack-preprocessor')

module.exports = (on, config) => {
  on('file:preprocessor', webpack({
    watchOptions: {}
  }))

  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'
  })
}

So this appears to be more a misconfiguration of @vue/cli

[warren-sadler]

@chrisbreiding Console logs look clean.

[oswaldofreitas]

same here, but I can't remove the webpack config line you mentioned because I'll have other errors like missing aliases

[warren-sadler]

@oswaldofreitas Are you referring to the import HelloWorld from "@/components/HelloWorld.vue" aliasing?

Yea, that's the only downer about the workaround, you lose all the vue-cli webpack goodness. Have you had any luck in troubleshooting this?

[oswaldofreitas]

in a new project created by vue create <proj> it seems to be fixed now with v3.0.5, but I didn't get to fix it yet in my project, it's something with url different from default localhost I guess. We're using php for backend and I'm trying to figure out what to change (--url option or baseUrl in cypress config, or .visit() url)

[peabnuts123]

I am also encountering this. Removing the file:preprocessor makes your code completely useless / impossible to test so that's not really an option. I am not really seeing many levers to pull to try and fix the problem, either. Seems to read the files fine but doesn't seem to be reading the contents of them, so even if I put throw new Error() at the top of the file it doesn't register / throw anything.

[oswaldofreitas]

Ok, I can reproduce it now :)

If I add a optimization section to my webpack config like this one:

optimization: {
  splitChunks: {
    cacheGroups: {
      vendor: {
        name: 'vendor',
        chunks: 'initial',
        test: path.resolve(__dirname, 'node_modules'),
        enforce: true,
      },
    },
  },
}

it shows me the "No tests found in your file", however if I remove that config everything works fine!

[LinusBorg]

Contributor of vue-cli here (the project that the reproduction is built on).

We recently found that doing any sort of code splitting with webpack 4 optimization breaks the cypress preprocessor.

We did a quick fix in our own webpack config:

https://github.com/vuejs/vue-cli/commit/ab0503b19f09eebc835447531e6e1578583fe979

But when users lik OP overwrites this config, it breaks again.

So I think we should investigate how codesplit chunks break the preprocessor.

[leeuwd]

I'm having the same/comparable issue. Still working on it. See https://github.com/cypress-io/cypress/issues/2608

[paxcodes]

Thanks to @LinusBorg comment. I just have to disable code splitting for now in my webpack config.

[jennifer-shehane]

Closing as resolved.

If you're experiencing a bug similar to this in Cypress, please open a new issue with a fully reproducible example that we can run. There may be a specific edge case with the issue that we need more detail to fix.