https://github.com/jsplumb-demonstrations/react-nextjs-testing

An example of how to use Cypress to test JsPlumb's React integration
https://github.com/jsplumb-demonstrations/react-nextjs-testing

Last synced: about 21 hours ago
JSON representation

An example of how to use Cypress to test JsPlumb's React integration

• Host: GitHub
• URL: https://github.com/jsplumb-demonstrations/react-nextjs-testing
• Owner: jsplumb-demonstrations
• Created: 2024-06-24T02:37:50.000Z (5 months ago)
• Default Branch: 6.x
• Last Pushed: 2024-06-24T03:27:01.000Z (5 months ago)
• Last Synced: 2024-06-24T05:34:41.165Z (5 months ago)
• Language: TypeScript
• Size: 19.5 KB
• Stars: 0
• Watchers: 0
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Next.js + Cypress + JsPlumb

This example shows how to configure Cypress to work with Next.js and JsPlumb.

## Key Points

- Ensure you have included the app CSS in the Cypress config located at `cypress/support/component.ts`. In this app we have this declaration:

```javascript

import '../../styles/globals.css'  // for JSPLUMB test

```

This is important as `globals.css` itself imports JsPlumb's stylesheet, which contains various sane defaults that JsPlumb requires in order to function correctly.  You may also be able to just import JsPlumb's stylesheet:

```javascript

import '../../node_modules/@jsplumbtoolkit/browser-ui/css/jsplumbtoolkit.css'  // for JSPLUMB test

```

- We wrote a couple of helper functions to access the component under test and create a `jsPlumbToolkitTestHarness` from it. These functions are in `components/canvas-component.cy.tsx`; if you wanted to test multiple components a good approach would be to extract this to a common module.  If there is sufficient interest we could ship these helper functions as a separate `@jsplumbtoolkit/browser-ui-react-cypress` package. Drop us a line if that's something you're interested in.