Cypress component testing - multiple issues

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

[barbados-clemens]

@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.

https://user-images.githubusercontent.com/23272162/186254995-5e7f3e32-db71-420c-b28b-643ccc36e8a0.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.

[barbados-clemens]

@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.