Cypress component testing - multiple issues #11372

ghost · 2022-07-30T11:39:50Z

Current Behavior

The following currently seems to not be supported in the component testing configuration preset when running nx g @nrwl/react:cypress-component-configuration:

React SVGR
Tailwind / PostCSS
@testing-library/cypress

Expected Behavior

The issues above are supported OOTB in React apps/libs, so they should probably be supported here as well.

Steps to Reproduce

Create a workspace @ v14.5.0 with a React library
Add tailwind & PostCSS configuration
Add a styles.css file that imports tailwind stuff (base, components & utils)
Run nx g @nrwl/react:cypress-component-configuration with the relevant lib
Add import @testing-library/cypress/add-commands to component.ts
Add import '../../src/styles.css to component.ts
Run nx component-test --watch

Result:

With testing library, you should see the error exports is not defined
With the CSS file, you should see errors related to the tailwind usage

Here's a repo with the reproduction - https://github.com/danr-za/cypress-ct-nx

Failure Logs

Environment

  Node : 16.13.0
   OS   : darwin x64
   yarn : 3.2.2
   
   nx : 14.5.0
   @nrwl/angular : Not Found
   @nrwl/cypress : 14.5.0
   @nrwl/detox : Not Found
   @nrwl/devkit : 14.5.0
   @nrwl/eslint-plugin-nx : 14.5.0
   @nrwl/express : Not Found
   @nrwl/jest : 14.5.0
   @nrwl/js : 14.5.0
   @nrwl/linter : 14.5.0
   @nrwl/nest : Not Found
   @nrwl/next : Not Found
   @nrwl/node : 14.5.0
   @nrwl/nx-cloud : 14.2.0
   @nrwl/nx-plugin : Not Found
   @nrwl/react : 14.5.0
   @nrwl/react-native : Not Found
   @nrwl/schematics : Not Found
   @nrwl/storybook : 14.5.0
   @nrwl/web : 14.5.0
   @nrwl/workspace : 14.5.0
   typescript : 4.7.4
   ---------------------------------------
   Community plugins:
         nx-stylelint: 13.5.2

The text was updated successfully, but these errors were encountered:

ghost · 2022-07-30T19:11:25Z

I tried it with vite - it has a minimum setup and includes everything the test need.
Here is the config:

import { defineConfig, searchForWorkspaceRoot } from 'vite'
import react from '@vitejs/plugin-react'
import tsconfigPaths from 'vite-tsconfig-paths'
import svgr from 'vite-plugin-svgr'
import { join } from 'path'
import { defaultConfig } from '@tools/webpack/svg'

export default defineConfig({
  plugins: [
    react(),
    tsconfigPaths({
      root: join(__dirname, '../../')
    }),
    svgr({
      svgrOptions: defaultConfig
    })
  ],
  server: {
    fs: {
      allow: [searchForWorkspaceRoot(process.cwd())]
    }
  }
})

Cypress:

import { defineConfig } from 'cypress'

export default defineConfig({
  component: {
    devServer: {
      framework: 'react',
      bundler: 'vite'
    }
  }
})

component-index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>Cypress</title>

</head>
<body>
  <div data-cy-root></div>
  <script type="module">
    import RefreshRuntime from "/@react-refresh"
    RefreshRuntime.injectIntoGlobalHook(window)
    window.$RefreshReg$ = () => {}
    window.$RefreshSig$ = () => (type) => type
    window.__vite_plugin_react_preamble_installed__ = true
  </script>
</body>
</html>

barbados-clemens · 2022-08-02T14:32:51Z

does this only happen when all four packages are added?

ghost · 2022-08-02T16:18:33Z

It also happens for each one independently.

barbados-clemens · 2022-08-23T20:04:20Z

@danr-za working on a fix for this now. got a PoC working levering @nrwl/web:webpack which would provide a more robust experience for component testing and have it working with your example repo you provided (thank you for providing it!). I hope to have a PR up some time before the end of the week.

Button.cy.tsx.mp4

yarn nx component-test ui
yarn run v1.22.15
$ /Users/caleb/Work/danr-za/cypress-ct-nx/node_modules/.bin/nx component-test ui

> nx run ui:component-test

<i> [webpack-dev-server] Project is running at:
<i> [webpack-dev-server] Loopback: http://127.0.0.1:8080/
<i> [webpack-dev-server] Content not from webpack is served from '/Users/caleb/Work/danr-za/cypress-ct-nx/libs/ui/public' directory

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

  (Run Starting)

  ┌────────────────────────────────────────────────────────────────────────────────────────────────┐
  │ Cypress:        10.3.1                                                                         │
  │ Browser:        Electron 100 (headless)                                                        │
  │ Node Version:   v16.15.0 (/Users/caleb/.nvm/versions/node/v16.15.0/bin/node)                   │
  │ Specs:          1 found (Button.cy.tsx)                                                        │
  │ Searched:       **/*.cy.{js,jsx,ts,tsx}                                                        │
  └────────────────────────────────────────────────────────────────────────────────────────────────┘


────────────────────────────────────────────────────────────────────────────────────────────────────
                                                                             
  Running:  Button.cy.tsx                                                                   (1 of 1)
chunk (runtime: main) cypress_support_component_ts.js 1.67 KiB [rendered]
chunk (runtime: main) main.js (main) (id hint: vendors) 156 KiB (javascript) 7.62 KiB (runtime) [entry] [rendered] reused as split chunk (cache group: defaultVendors)
chunk (runtime: main) spec-0.js (spec-0) 12.7 KiB [rendered]
chunk (runtime: main) vendors-node_modules_core-js_modules_es_object_assign_js-node_modules_react_jsx-runtime_js-no-9ce0a5.js (id hint: vendors) 83.3 KiB [rendered] split chunk (cache group: defaultVendors)
chunk (runtime: main) vendors-node_modules_react_index_js.js (id hint: vendors) 85.7 KiB [rendered] split chunk (cache group: defaultVendors)
chunk (runtime: main) vendors-node_modules_testing-library_cypress_add-commands_js-node_modules_cypress_react_dist_-16a054.js (id hint: vendors) 1.35 MiB [rendered] split chunk (cache group: defaultVendors)
webpack compiled successfully (a176b76fae95a61f)
Type-checking in progress...
No errors found.


  Button
    ✓ should render (555ms)


  1 passing (581ms)


  (Results)

  ┌────────────────────────────────────────────────────────────────────────────────────────────────┐
  │ Tests:        1                                                                                │
  │ Passing:      1                                                                                │
  │ Failing:      0                                                                                │
  │ Pending:      0                                                                                │
  │ Skipped:      0                                                                                │
  │ Screenshots:  0                                                                                │
  │ Video:        true                                                                             │
  │ Duration:     0 seconds                                                                        │
  │ Spec Ran:     Button.cy.tsx                                                                    │
  └────────────────────────────────────────────────────────────────────────────────────────────────┘


  (Video)

  -  Started processing:  Compressing to 32 CRF                              
  -  Finished processing: /Users/caleb/Work/danr-za/cypress-ct-nx/dist/cypress/libs/u    (0 seconds)
                          i/videos/Button.cy.tsx.mp4                         


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

  (Run Finished)


       Spec                                              Tests  Passing  Failing  Pending  Skipped
  ┌────────────────────────────────────────────────────────────────────────────────────────────────┐
  │ ✔  Button.cy.tsx                            577ms        1        1        -        -        - │
  └────────────────────────────────────────────────────────────────────────────────────────────────┘
    ✔  All specs passed!                        577ms        1        1        -        -        -


 ———————————————————————————————————————————————————————————————————————————

 >  NX   Successfully ran target component-test for project ui (7s)

✨  Done in 7.07s.

…ebpack config fixes: nrwl#11372

ghost · 2022-08-24T13:55:53Z

I think it might be also a good time for nx to start integrating vite in 😉
Except its performance, all the built-in setups we get inside is crazy

…ebpack config fixes: nrwl#11372

#11725) * fix(testing): use @nrwl/web:webpack utils to generate a more robust webpack config fixes: #11372 * fix(testing): do not overwrite existing component test * fix(testing): add component-test to cacheable operations * chore(testing): address pr feedback

Huink7 · 2022-09-02T14:55:22Z

@barbados-clemens forgive my ignorance, but could you provide a code example of the solution that you tested? I am relatively green to nx and the migration to 14.6.2 did not work for me. I am struggling with the same thing as OP except I am working in a component package library where we are exporting pure react components with no react app. It's possible I am missing additional configuration, but right now its just running on

// project.json
"component-test": {
  "executor": "@nrwl/cypress:cypress",
  "options": {
    "cypressConfig": "packages/form/cypress.config.ts",
    "testingType": "component",
  }
}
// cypress.config.ts
export default defineConfig({
  component: {
    ...nxComponentTestingPreset(__dirname)
  }
})

barbados-clemens · 2022-09-02T16:12:49Z

@Huink7 if you do not have a react app in your workspace, then the nx preset will fallback to a default webpack config with minimal settings. (this is true of what plain cypress component testing does as well)
you can optionally provide your own webpack config to apply any extra things you'd need to test.

i.e.

export default defineConfig({
  component: {
    devServer: {
      framework: 'react',
      bundler: 'webpack', 
      webpackConfig: // your custom webpack config
    }   
  }
})

Now I personally would't want to do this because writing webpack configs and keeping up with them is a pain.

So you can leverage the nxComponentTestingPreset for react. where this preset will use @nrwl/web:webpack under the hood to make this config for you. but it needs a handful of options, so this is where it uses your another react app in the workspace, since it'll already have a 'build' configuration in place.

To do this, just make a react app or create a @nrwl/web:webpack based target in the project you're wanting, i.e. make an app and copy over the stuff.

nx g @nrwl/react:app ct // or whatever you want to call it. doesn't matter since it's going to just be used for component testing.

then tell the component testing target about it.

"component-test": {
  "options": {
    "cypressConfig": "packages/form/cypress.config.ts",
    "testingType": "component",
    "devServerTarget": "some-project:some-target-using-nrwl/web:webpack",
    "skipServe": true // very important so you don't build the project
  }
}

now the nx component testing preset will be able to create a more complete webpack config for component testing.

github-actions · 2023-03-21T23:06:00Z

This issue has been closed for more than 30 days. If this issue is still occuring, please open a new issue with more recent context.

ghost added the type: bug label Jul 30, 2022

AgentEnder added the scope: testing tools Issues related to Cypress / Jest / Playwright / Vitest support in Nx label Aug 2, 2022

barbados-clemens added a commit to barbados-clemens/nx that referenced this issue Aug 24, 2022

fix(testing): use @nrwl/web:webpack utils to generate a more robust w…

d38ba25

…ebpack config fixes: nrwl#11372

barbados-clemens added a commit to barbados-clemens/nx that referenced this issue Aug 25, 2022

fix(testing): use @nrwl/web:webpack utils to generate a more robust w…

6734abc

…ebpack config fixes: nrwl#11372

barbados-clemens added a commit to barbados-clemens/nx that referenced this issue Aug 25, 2022

fix(testing): use @nrwl/web:webpack utils to generate a more robust w…

48ec69a

…ebpack config fixes: nrwl#11372

barbados-clemens added a commit to barbados-clemens/nx that referenced this issue Aug 25, 2022

fix(testing): use @nrwl/web:webpack utils to generate a more robust w…

bcd5679

…ebpack config fixes: nrwl#11372

barbados-clemens mentioned this issue Aug 25, 2022

fix(testing): handle more complex projects for react component testing #11725

Merged

barbados-clemens added a commit to barbados-clemens/nx that referenced this issue Aug 25, 2022

fix(testing): use @nrwl/web:webpack utils to generate a more robust w…

fa097da

…ebpack config fixes: nrwl#11372

barbados-clemens added a commit to barbados-clemens/nx that referenced this issue Aug 25, 2022

fix(testing): use @nrwl/web:webpack utils to generate a more robust w…

e877377

…ebpack config fixes: nrwl#11372

barbados-clemens added a commit to barbados-clemens/nx that referenced this issue Aug 26, 2022

fix(testing): use @nrwl/web:webpack utils to generate a more robust w…

103474e

…ebpack config fixes: nrwl#11372

barbados-clemens added a commit to barbados-clemens/nx that referenced this issue Aug 26, 2022

fix(testing): use @nrwl/web:webpack utils to generate a more robust w…

71c2458

…ebpack config fixes: nrwl#11372

barbados-clemens added a commit to barbados-clemens/nx that referenced this issue Aug 26, 2022

fix(testing): use @nrwl/web:webpack utils to generate a more robust w…

8205832

…ebpack config fixes: nrwl#11372

barbados-clemens added a commit to barbados-clemens/nx that referenced this issue Aug 26, 2022

fix(testing): use @nrwl/web:webpack utils to generate a more robust w…

246dffd

…ebpack config fixes: nrwl#11372

barbados-clemens added a commit to barbados-clemens/nx that referenced this issue Aug 30, 2022

fix(testing): use @nrwl/web:webpack utils to generate a more robust w…

fc72fba

…ebpack config fixes: nrwl#11372

barbados-clemens added a commit to barbados-clemens/nx that referenced this issue Aug 30, 2022

fix(testing): use @nrwl/web:webpack utils to generate a more robust w…

206982e

…ebpack config fixes: nrwl#11372

barbados-clemens closed this as completed in #11725 Aug 30, 2022

github-actions bot added the outdated label Mar 21, 2023

github-actions bot locked as resolved and limited conversation to collaborators Mar 21, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Cypress component testing - multiple issues #11372

Cypress component testing - multiple issues #11372

ghost commented Jul 30, 2022

ghost commented Jul 30, 2022

barbados-clemens commented Aug 2, 2022

ghost commented Aug 2, 2022

barbados-clemens commented Aug 23, 2022

ghost commented Aug 24, 2022

Huink7 commented Sep 2, 2022 •

edited

Loading

barbados-clemens commented Sep 2, 2022 •

edited

Loading

github-actions bot commented Mar 21, 2023

Cypress component testing - multiple issues #11372

Cypress component testing - multiple issues #11372

Comments

ghost commented Jul 30, 2022

Current Behavior

Expected Behavior

Steps to Reproduce

Failure Logs

Environment

ghost commented Jul 30, 2022

barbados-clemens commented Aug 2, 2022

ghost commented Aug 2, 2022

barbados-clemens commented Aug 23, 2022

ghost commented Aug 24, 2022

Huink7 commented Sep 2, 2022 • edited Loading

barbados-clemens commented Sep 2, 2022 • edited Loading

github-actions bot commented Mar 21, 2023

Huink7 commented Sep 2, 2022 •

edited

Loading

barbados-clemens commented Sep 2, 2022 •

edited

Loading