Component testing does not honour configuration values provided by plugins.

[3rd-Eden]

Current behavior

In Cypress ^6.8.0 it was possible to configure component testing using a plugin file by modifying the received configuration. Since the release of 7 this is no longer possible and requires you to configure component testing
in the cypress.json file instead.

Desired behavior

It should honour the plugin overrides.

Test code to reproduce

The Cypress.json that is now required, (this was empty on 6.8.0)

{
  "component": {
    "componentFolder": ".",
    "fixturesFolder": false,
    "ignoreTestFiles": "**/node_modules/**",
    "testFiles": "**/*.cypress.js"
  }
}

The previous configuration merged in a plugin file:

module.exports = function (on, base) {
    const config = require('deepmerge')(base, {
        testFiles: '**/*.cypress.js',
        integrationFolder: 'cypress',
        ignoreTestFiles: '**/node_modules/**',
        experimentalComponentTesting: true,
    });

    return config;
}

Packages:
-cypress: ^7.2.0
-@cypress/react: ^5.4.2
-@cypress/webpack-dev-server: ^1.1.6

Environment:
-Node.js: v12.9.0
-NPM: 6.10.2

[lmiller1990]

Seems like a regression. Those defaults should be applied to both e2e and CT. Are you launching the component testing runner using npx cypress open-ct, or still using the original component testing plugin in the e2e? Blog post discussion new Component Testing specific runner.

[lmiller1990]

I was not able to reproduce this. I'm using the Component Testing runner with the latest version of Cypress (7.3.0). My overrides in cypress/plugins/index.js worked, I was able to set the viewport height/width to 888, overriding cypress.json:

I could be misunderstanding your issue. Maybe you can clarify, or post an repository I could pull down and run?

Another thing that might be of interest is you can get the test runner (either e2e or component) from the config argument (called base in your example):

module.exports = (on, config) => {
  if (config.testingType === 'component') {
    // something component testing specific, return modified config?
  }
 
  if (config.testingType === 'e2e') {
    // something e2e specific, return modified config?
  }
 

  return config
}

npx cypress open-ct will be component, npx cypress open will be e2e.

[3rd-Eden]

I'm not talking about the viewport props, or any other configuration value, I'm talking purely about the logic that is used to find the component spec files. When I run my test suite with purely configuration values provided by the plugin which sets the componentFolder, testFiles options it fails to run the test suite. In fact, it doesn't even show the spec files in the runner anymore:

While the console output does correctly state that a spec file has been found:

ℹ ｢wds｣: Project is running at http://localhost:57159/webpack-dev-server/
ℹ ｢wds｣: webpack output is served from /__cypress/src
ℹ ｢wds｣: Content not from webpack is served from /[redacted]/cypress-config

====================================================================================================

  (Run Starting)

  ┌────────────────────────────────────────────────────────────────────────────────────────────────┐
  │ Cypress:    7.2.0                                                                              │
  │ Browser:    Chrome 90                                                                          │
  │ Specs:      1 found (test/mount.cypressed.js)                                                  │
  └────────────────────────────────────────────────────────────────────────────────────────────────┘


────────────────────────────────────────────────────────────────────────────────────────────────────

  Running:  test/mount.cypressed.js                                                         (1 of 1)
[BABEL] Note: The code generator has deoptimised the styling of /[redacted]/cypress-config/node_modules/react-dom/cjs/react-dom.development.js as it exceeds the max of 500KB.
ℹ ｢wdm｣: Hash: 065608cdab340757c946
Version: webpack 4.46.0
Time: 5609ms
Built at: 11/05/2021 13:53:38
                   Asset       Size          Chunks             Chunk Names
             0.bundle.js   16.8 KiB               0  [emitted]
             1.bundle.js   1.16 MiB               1  [emitted]
             2.bundle.js   8.46 KiB               2  [emitted]
              index.html  339 bytes                  [emitted]
                 main.js   11.4 KiB            main  [emitted]  main
        spec-0.bundle.js   49.5 KiB          spec-0  [emitted]  spec-0
vendors~spec-0.bundle.js    968 KiB  vendors~spec-0  [emitted]  vendors~spec-0
Entrypoint main = main.js
[./commands.js] 388 bytes {2} [built]
[./cypress/support/commands.js] 867 bytes {2} [built]
[./cypress/support/index.js] 667 bytes {2} [built]
[./mount/index.js] 4.23 KiB {spec-0} [built]
[./node_modules/@babel/runtime/helpers/classCallCheck.js] 274 bytes {0} [built]
[./node_modules/@babel/runtime/helpers/createClass.js] 674 bytes {0} [built]
[./node_modules/@babel/runtime/helpers/getPrototypeOf.js] 425 bytes {0} [built]
[./node_modules/@babel/runtime/helpers/inherits.js] 586 bytes {0} [built]
[./node_modules/@babel/runtime/helpers/possibleConstructorReturn.js] 447 bytes {0} [built]
[./node_modules/@cypress/webpack-dev-server/dist/aut-runner.js] 545 bytes {main} [built]
[./node_modules/@cypress/webpack-dev-server/dist/browser.js] 73 bytes {main} [built]
[./node_modules/@cypress/webpack-dev-server/dist/loader.js!./node_modules/@cypress/webpack-dev-server/dist/browser.js] 933 bytes {main} [built]
[./node_modules/assume/index.js] 31.9 KiB {vendors~spec-0} [built]
[./node_modules/react/index.js] 189 bytes {vendors~spec-0} [built]
[./test/mount.cypressed.js] 3.17 KiB {spec-0} [built]
    + 511 hidden modules
Child HtmlWebpackCompiler:
                          Asset      Size               Chunks  Chunk Names
    __child-HtmlWebpackPlugin_0  4.86 KiB  HtmlWebpackPlugin_0  HtmlWebpackPlugin_0
    Entrypoint HtmlWebpackPlugin_0 = __child-HtmlWebpackPlugin_0
    [../../../node_modules/html-webpack-plugin/lib/loader.js!./node_modules/@cypress/webpack-dev-server/index-template.html] /[redacted]/html-webpack-plugin/lib/loader.js!./node_modules/@cypress/webpack-dev-server/index-template.html 544 bytes {HtmlWebpackPlugin_0} [built]
ℹ ｢wdm｣: Compiled successfully.

Timed out waiting for the browser to connect. Retrying...

Timed out waiting for the browser to connect. Retrying again...

The browser never connected. Something is wrong. The tests cannot run. Aborting...

The browser never connected. Something is wrong. The tests cannot run. Aborting...

  (Results)

  ┌────────────────────────────────────────────────────────────────────────────────────────────────┐
  │ Tests:        0                                                                                │
  │ Passing:      0                                                                                │
  │ Failing:      1                                                                                │
  │ Pending:      0                                                                                │
  │ Skipped:      0                                                                                │
  │ Screenshots:  0                                                                                │
  │ Video:        false                                                                            │
  │ Duration:     0 seconds                                                                        │
  │ Spec Ran:     test/mount.cypressed.js                                                          │
  └────────────────────────────────────────────────────────────────────────────────────────────────┘


====================================================================================================

  (Run Finished)


       Spec                                              Tests  Passing  Failing  Pending  Skipped
  ┌────────────────────────────────────────────────────────────────────────────────────────────────┐
  │ ✖  test/mount.cypressed.js                    0ms        -        -        1        -        - │
  └────────────────────────────────────────────────────────────────────────────────────────────────┘
    ✖  1 of 1 failed (100%)                       0ms        -        -        1        -        -

[lmiller1990]

In your above screenshot, it looks like the sidebar is just really small.

See this comment.

Back to your issue: I understand now and I reproduced the problem by creating an empty cypress.json and inlining the configuration in plugins/index.js. I will work on fixing this now.

[lmiller1990]

I am working on this here. I added a minimal reproduction.

[lmiller1990]

Ok, I fixed it: #16468

[jennifer-shehane]

The code for this is done in #16468, but this has yet to be released. We'll update this issue and reference the changelog when it's released.

[cypress-bot]

Released in 7.4.0.

This comment thread has been locked. If you are still experiencing this issue after upgrading to
Cypress v7.4.0, please open a new issue.