fix: no longer require JSX name (#175)

so you can mount divs from tests like this
```js
mount(<div>Works</div>)
```

Author: bahmutov

cypress/component/advanced/lazy-loaded/lazy-load-spec.js

@@ -1,4 +1,6 @@
 // https://github.com/bahmutov/cypress-react-unit-test/issues/136
+// dynamic imports like this work in example projects, but not inside this repo
+// probably due to webpack plugins not set up correctly ☹️
 describe.skip('dynamic import', () => {
   it('loads', () => {
     // cy.wrap(import('./lazy-add'))

cypress/component/advanced/material-ui-example/list-item-spec.js

@@ -6,12 +6,11 @@ import { ListItemText } from '@material-ui/core'
 import SimpleList from './list-demo'
 
 it('renders a list item', () => {
-  const Demo = () => (
+  mount(
     <ListItem>
       <ListItemText primary={'my example list item'} />
-    </ListItem>
+    </ListItem>,
   )
-  mount(<Demo />)
   cy.contains('my example list item')
 })
 

cypress/component/advanced/portal/portal-spec.js

@@ -6,18 +6,16 @@ const RenderInPortal = ({ children }) => {
   return ReactDOM.createPortal(children, document.body)
 }
 
-const MyComponent = () => (
-  <div id="component">
-    <p>Hello World!</p>
-    <RenderInPortal>
-      <p> I am in portal </p>
-    </RenderInPortal>
-  </div>
-)
-
 describe('Portals', () => {
   it('renders content inside the portal', () => {
-    mount(<MyComponent />)
+    mount(
+      <div id="component">
+        <p>Hello World!</p>
+        <RenderInPortal>
+          <p> I am in portal </p>
+        </RenderInPortal>
+      </div>,
+    )
 
     cy.contains('#component', 'Hello World!')
     cy.get('#component').should('not.contain', 'I am in portal')

cypress/component/basic/mount-div/spec.js

@@ -0,0 +1,27 @@
+/// <reference types="cypress" />
+/// <reference types="../../lib" />
+import React from 'react'
+import { mount } from 'cypress-react-unit-test'
+
+function Button() {
+  return <button>Hello</button>
+}
+
+describe('mounting a div', () => {
+  it('works', () => {
+    mount(<div className="example">Works</div>)
+    cy.contains('Works').should('be.visible')
+  })
+
+  // https://github.com/bahmutov/cypress-react-unit-test/issues/98
+  it('mount multiple components', function() {
+    mount(
+      <div>
+        <Button />
+        <hr />
+        <Button />
+      </div>,
+    )
+    cy.get('button').should('have.length', 2)
+  })
+})

lib/getDisplayName.ts

@@ -49,7 +49,9 @@ export default function getDisplayName(
     }
   }
 
-  cachedDisplayNames.set(type, displayName)
+  try {
+    cachedDisplayNames.set(type, displayName)
+  } catch (e) {}
 
   return displayName
 }

lib/index.ts

@@ -45,15 +45,15 @@ export const mount = (jsx: React.ReactElement, options: MountOptions = {}) => {
 
   // Get the display name property via the component constructor
   // @ts-ignore FIXME
-  const displayname = getDisplayName(jsx.type, options.alias)
+  const displayName = getDisplayName(jsx.type, options.alias)
   let logInstance: Cypress.Log
 
   return cy
     .then(() => {
       if (options.log !== false) {
         logInstance = Cypress.log({
           name: 'mount',
-          message: [`ReactDOM.render(<${displayname} ... />)`],
+          message: [`ReactDOM.render(<${displayName} ... />)`],
         })
       }
     })
@@ -99,7 +99,7 @@ export const mount = (jsx: React.ReactElement, options: MountOptions = {}) => {
 
       return cy
         .wrap(CypressTestComponent, { log: false })
-        .as(options.alias || displayname)
+        .as(options.alias || displayName)
         .then(() => {
           if (logInstance) {
             logInstance.snapshot('mounted')