How to add component testing without affecting E2E testing?

[liby]

Question1

There is a setting about testFiles in the document, that I don't quite understand.
"testFiles": ". */__tests__/. *spec.tsx" where __tests__ is the placeholder variables that can be replaced? Is the __tests__ here the name of the example folder? It doesn't look like it's a wildcard

Question2

Here's my desired project structure:

myProject/
├── cypress/
│   ├── component/
│   │  └── component.tsx
│   │  └── component-test.spec.tsx
│   └── integration/
│       └── e2e.ts
└── src/
    └── SomeComponent/
        ├── component.tsx
        └── component-test.spec.tsx

This is my current setting, only the test files in the cypress folder will be detected.

cyprss.json

{
  "testFiles": "cypress/integration/*.ts",
  "component": {
    "componentFolder": "cypress",
    "testFiles": "**/*.spec.{js,jsx,ts,tsx}"
  },
  "chromeWebSecurity": false,
  "baseUrl": "https://user.dev",
  "userAgent": "E2E/aF$$mJzDpWyaIR4_",
  "supportFile": "cypress/support/index.ts",
  "viewportWidth": 1280,
  "viewportHeight": 1600,
}

How do I set the componentFolder to show all the test files in the src and cypress folders at the same time?

Question3

In addition, there is a question about how to write the plugins/index.js file.
My current way of writing is:

cypress/plugins/cy-ts-preprocessor.js

const wp = require('@cypress/webpack-preprocessor')

const webpackOptions = {
  resolve: {
    extensions: ['.ts', '.js']
  },
  module: {
    rules: [
      {
        test: /\.ts$/,
        exclude: [/node_modules/],
        use: [
          {
            loader: 'ts-loader'
          }
        ]
      }
    ]
  }
}

const options = {
  webpackOptions
}

module.exports = wp(options)

cypress/plugins/index.js

const { startDevServer } = require('@cypress/webpack-dev-server')
// Your project's Webpack configuration
const webpackConfig = require('../../scripts/webpack/webpack.local')
const cypressTypeScriptPreprocessor = require('./cy-ts-preprocessor');

module.exports = (on, config) => {
  if (config.testingType === 'component') {
    on('dev-server:start', (options) =>
      startDevServer({ options, webpackConfig })
    )
  }

  if (config.testingType === 'e2e') {
    on('file:preprocessor', cypressTypeScriptPreprocessor);

    // https://docs.cypress.io/api/plugins/browser-launch-api.html#Modify-args-based-on-browser
    on('before:browser:launch', (browser = {}, launchOptions) => {
      if (browser.name === 'chrome') {
        launchOptions.args.push('--auto-open-devtools-for-tabs');
      }
      // whatever you return here becomes the new args
      return launchOptions;
    });
  }


  return config
}

I didn't find an E2E compatible profile in the documentation. This is the way I saw it in this issue #16424. Is this method of writing recommended?

Question4

Install the dependencies according to the documentation: npm install --save-dev cypress @cypress/react @cypress/webpack-dev-server webpack-dev-server.

However, when writing the test file, I encountered an ESLint error: @cypress/react' should be listed in the project's dependencies, not devDependencies.eslintimport/no-extraneous-dependencies).

Solved it by adding this to my .eslintrc:

"import/no-extraneous-dependencies": ["error", {"devDependencies": ["**/*.spec.ts", "**/*.spec.tsx"]}]

But is this the right solution?

Question5

Do I have to rerun the yarn cypress open-ct command to respond to updates after modifying the cypress.json file?

Looking forward to your reply!

[elevatebart]

Hello @liby

Those are great questions indeed.

Q1: __tests__ is the name jest gives by default to the folder containing tests, (see this documentation).

To avoid confusion between e2e and component tests we made this example specific to component testing. It is supposed to help users migrate from Jest to Cypress, which we take will be pretty common. You can have your spec files in any folder you would like, with any name you prefer. Make sure the glob here reflects your choices.

Q2: componentFolder can be ".". in which case, cypress will look for every file that matches the pattern from the root of your project. That can be slow, though, because you will watch all of node_modules. I suggest you move all your components in a src folder and have all tests as close to the component they test as you can.

Q3: Because I find clearer to have multiple smaller files, I always recommend to use the component or e2e overrides to have a plugin file specific to component and another specific to e2e. If you have common code, you can make a 3rd file and import it in both.

To be continued...

[elevatebart]

Q4: This is indeed the right solution.
The devDependencies are only useful if you are planing on publishing the work you are doing on npmjs. In which case, when someone installs the library you have published the devDependencies will be ignored. The no-extraneous-dependency rule is there to make sure that, in the published files (not the test files), there is no dependency that we forgot to put in the dependencies field.

Q5: Unfortunately, yes. Changes to cypress.json require a restart of the cypress server. We are working on making it a leaner start and also automate refreshes when cypress.json is updated. Coming soon 🎉

[liby]

I do rarely write test code, so I have some questions that you think are general knowledge. I'm glad to receive such a detailed reply.

Because I find clearer to have multiple smaller files, I always recommend to use the component or e2e overrides to have a plugin file specific to component and another specific to e2e.

Are there any existing examples like webpack-file?

Unfortunately, yes. Changes to cypress.json require a restart of the cypress server. We are working on making it a leaner start and also automate refreshes when cypress.json is updated

I'm really looking forward to it!

Finally, I'm sorry for taking up your time. Have a nice day.

[elevatebart]

There is no official example set up yet with both e2e and component testing.
I should probably set one up.

@cowboy Do you know if this is in the plans?

[liby]

While writing tests today, I found an issue where Webpack externals setting item causes cypress to report an error, For example, my externals is set up as follows:

  externals: {
    lodash: "_",
    moment: "moment",
    highcharts: "Highcharts",
  }

This will result in the following error: _ is not defined

I don't know if this has anything to do with Cypress built-in utilities, such as Cypress._.
Is this the expected behavior?

[Phonesis]

Is it technically possible to have the component folder set to src but then have the spec files for the components outside of the src folder? I cannot seem to get Cypress to ever pick the specs up unless they sit within the src folder. Is this by design?