cypress-io · bahmutov · Feb 18, 2019 · Jan 22, 2019 · Jan 22, 2019 · Jan 22, 2019
diff --git a/README.md b/README.md
@@ -34,10 +34,11 @@ describe('HelloState component', () => {
  cy.mount(<HelloState />)
  // start testing!
  cy.contains('Hello Spider-man!')
- // mounted component is aliased as @Component
- cy.get('@Component')
+ // mounted component can be selected via its name, function, or JSX
+ // e.g. '@HelloState', HelloState, or <HelloState />
+ cy.get(HelloState)
  .invoke('setState', { name: 'React' })
- cy.get('@Component')
+ cy.get(HelloState)
  .its('state')
  .should('deep.equal', { name: 'React' })
  // check if GUI has rerendered

diff --git a/cypress/fixtures/modules.json b/cypress/fixtures/modules.json
@@ -0,0 +1,12 @@
+[
+ {
+ "name": "react",
+ "type": "file",
+ "location": "node_modules/react/umd/react.development.js"
+ },
+ {
+ "name": "react-dom",
+ "type": "file",
+ "location": "node_modules/react-dom/umd/react-dom.development.js"
+ }
+]
diff --git a/cypress/integration/counter-spec.js b/cypress/integration/counter-spec.js
@@ -40,7 +40,7 @@ describe('Counter cy.mounted before each test', () => {
  .click()
  .click()
  .click()
- cy.get('@Component')
+ cy.get(Counter)
  .its('state')
  .should('deep.equal', {count: 3})
  })

diff --git a/cypress/integration/error-boundary-spec.js b/cypress/integration/error-boundary-spec.js
@@ -18,7 +18,7 @@ describe('Error Boundary', () => {
  )
  cy.get('h1')
  .should('have.text', 'Normal Child')
- cy.get('@Component')
+ cy.get(ErrorBoundary)
  .its('state.error')
  .should('not.exist')
  })
@@ -33,10 +33,10 @@ describe('Error Boundary', () => {
  .should('contain', 'Something went wrong.')
  cy.get('header h3')
  .should('contain', 'failed to load')
- cy.get('@Component')
+ cy.get(ErrorBoundary)
  .its('state.error.message')
  .should('equal', errorMessage)
- cy.get('@Component')
+ cy.get(ErrorBoundary)
  .its('state.error.stack')
  .should('contain', 'ChildWithError')
  })

diff --git a/cypress/integration/hello-x-spec.js b/cypress/integration/hello-x-spec.js
@@ -14,9 +14,9 @@ describe('HelloState component', () => {
  cy.mount(<HelloState />)
  cy.contains('Hello Spider-man!')
  const stateToSet = { name: 'React' }
- cy.get('@Component')
+ cy.get(HelloState)
  .invoke('setState', stateToSet)
- cy.get('@Component')
+ cy.get(HelloState)
  .its('state')
  .should('deep.equal', stateToSet)
  cy.contains('Hello React!')

diff --git a/cypress/integration/transpiled-spec.js b/cypress/integration/transpiled-spec.js
@@ -40,7 +40,7 @@ describe('Counter cy.mounted before each test', () => {
  .click()
  .click()
  .click()
- cy.get('@Component')
+ cy.get(Transpiled)
  .its('state')
  .should('deep.equal', {count: 3})
  })

diff --git a/cypress/support/commands.js b/cypress/support/commands.js
@@ -29,21 +29,20 @@ import { stylesCache, setXMLHttpRequest, setAlert } from '../../lib'
  @function cy.injectReactDOM
 **/
 Cypress.Commands.add('injectReactDOM', () => {
- var packages = {}
- // 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)
- .readFile('node_modules/react-dom/umd/react-dom.development.js', { log: false }).then(file => packages.ReactDOM = file)
  .then(() => {
+ // Generate inline script tags for UMD modules
+ const scripts = Cypress.modules
+ .map(module => `<script>${module.source}</script>`)
+ .join('')
  // include React and ReactDOM to force DOM to register all DOM event listeners
  // otherwise the component will NOT be able to dispatch any events
  // when it runs the second time
  // https://github.com/bahmutov/cypress-react-unit-test/issues/3
  var html = `<body>
  <div id="cypress-jsdom"></div>
- <script>${packages.React}</script>
- <script>${packages.ReactDOM}</script>
+ ${scripts}
  </body>`
  const document = cy.state('document')
  document.write(html)
@@ -94,18 +93,46 @@ Cypress.Commands.add('copyComponentStyles', (component) => {
  @param {Object} jsx
  @param {string} [Component] alias
 **/
-Cypress.Commands.add('mount', (jsx, alias = 'Component') => {
+Cypress.Commands.add('mount', (jsx, alias) => {
+ // Get the displayname property via the component constructor
+ const displayname = alias || jsx.type.prototype.constructor.name
  cy
  .injectReactDOM()
- .log('ReactDOM.render(<' + alias + ' ... />)')
+ .log(`ReactDOM.render(<${displayname} ... />)`, jsx.props)
  .window({ log: false })
  .then(setXMLHttpRequest)
  .then(setAlert)
  .then(win => {
  const { ReactDOM } = win
  const document = cy.state('document')
  const component = ReactDOM.render(jsx, document.getElementById('cypress-jsdom'))
- cy.wrap(component, { log: false }).as(alias)
+ cy.wrap(component, { log: false }).as(displayname)
  })
  cy.copyComponentStyles(jsx)
 })
+
+/** Get one or more DOM elements by selector or alias.
+ Features extended support for JSX and React.Component
+ @function cy.get
+ @param {string|object|function} selector
+ @param {object} options
+ @example cy.get('@Component')
+ @example cy.get(<Component />)
+ @example cy.get(Component)
+**/
+Cypress.Commands.overwrite('get', (originalFn, selector, options) => {
+ switch (typeof selector) {
+ case 'object':
+ // If attempting to use JSX as a selector, reference the displayname
+ if (selector.$$typeof && selector.$$typeof.toString().startsWith('Symbol(react')) {
+ const displayname = selector.type.prototype.constructor.name
+ return originalFn(`@${displayname}`, options)
+ }
+ case 'function':
+ // If attempting to use the component name without JSX (testing in .js/.ts files)
+ const displayname = selector.prototype.constructor.name
+ return originalFn(`@${displayname}`, options)
+ default:
+ return originalFn(selector, options)
+ }
+})
diff --git a/cypress/support/index.d.ts b/cypress/support/index.d.ts
@@ -0,0 +1,16 @@
+declare namespace Cypress {
+ interface Cypress {
+ stylesCache: any
+ React: string
+ ReactDOM: string
+ Styles: string
+ }
+ // NOTE: By default, avoiding React.Component/Element typings
+ // for many cases, we don't want to import @types/react
+ interface Chainable<Subject = any> {
+ injectReactDOM: () => Chainable<void>
+ copyComponentStyles: (component: Symbol) => Chainable<void>
+ mount: (component: Symbol, alias?: string) => Chainable<void>
+ get<S = any>(alias: string | symbol | Function, options?: Partial<Loggable & Timeoutable>): Chainable<any>
+ }
+}
diff --git a/cypress/support/index.js b/cypress/support/index.js
@@ -1,3 +1,24 @@
+/*
+Before All
+- Load and cache UMD modules specified in fixtures/modules.json
+ These scripts are inlined in the document during unit tests
+ modules.json should be an array, which implicitly sets the loading order
+ Format: [{name, type, location}, ...]
+*/
+before(() => {
+ Cypress.modules = []
+ cy.log('Initializing UMD module cache')
+ .fixture('modules')
+ .then((modules = []) => {
+ for (const module of modules) {
+ let { name, type, location } = module
+ cy.log(`Loading ${name} via ${type}`)
+ .readFile(location)
+ .then(source => Cypress.modules.push({ name, type, location, source }))
+ }
+ })
+})
+
 // ***********************************************************
 // This example support/index.js is processed and
 // loaded automatically before your test files.

diff --git a/package-lock.json b/package-lock.json