Use Cypress commands and aliases, version bumps and module loading tweaks #37
Conversation
|
@RcKeller this is 100% 🔥 nice job! Let me and @amirrustam read and discuss this at Cypress, we were looking for answers like this to how to go about component testing. |
| name: 'React' | ||
| }) | ||
| // mounted component is aliased as @Component | ||
| cy.get('@Component') |
There was a problem hiding this comment.
or even get it by component itself like
cy.get(<HelloState />)
// finds previously mounted <HelloState />
Also maybe as alternative find by camel case name?
cy.get('@HelloState')
| // Yeah, due to how Cy resolves promises under the hood, a closure works but an @aliased cached asset doesn't | ||
| return cy | ||
| .log('Injecting ReactDOM for Unit Testing') | ||
| .readFile('node_modules/react/umd/react.development.js', { log: false }).then(file => packages.React = file) |
There was a problem hiding this comment.
for performance reasons you might read these two files once and just keep them in memory
| @param {string} [Component] alias | ||
| **/ | ||
| Cypress.Commands.add('mount', (jsx, alias = 'Component') => { | ||
| cy |
There was a problem hiding this comment.
we need to throw an error here if the user tries to mount more than once
cy.mount(...) // ok
cy.mount(...) // error
There was a problem hiding this comment.
We love it, this is really really nice direction for this package. Thank you for taking the time to make such great PR. I will merge it and we will see where to go from here. There were a couple of things we would like to tackle in 2.1.0 (see individual comments), and we will work on it, or feel free to open another PR once this gets released and you have the chance to play with the new API syntax a little bit more.
|
Also, I need to update the readme, since now this plugin has to be loaded from |
|
also, I need to add TypeScript type file to add command |
|
Fantastic! @bahmutov I've made the requested changes on another branch, keeping them separate so you can cherry pick them. Here you go: RcKeller#1
|
…ding tweaks (cypress-io/cypress-react-unit-test#37) BREAKING CHANGE: how components are mounted and accessed * Fixed users spec - had race condition * Drafted cypress commands * Lib functions as commands. Use node_modules for loading React * Switch over to using cy.mount. Docs updated * Version bumping incl. babel@7 * Added error boundaries - good example component * Line about err boundary component
I'm absolutely loving this outside-the-box usage of Cypress! In using this in a few different applications (some w/ TS, some not), I found a few points that could be improved:
Cypress.component, for consistency w/ the rest of the API.cy.mounta command because of how often it is used. Added JSDocs for our non-TS users@babel/core@7, adjustments to babel setup as needed.I've updated the README to reflect these changes. Thanks!