diff --git a/cypress/component/advanced/lazy-loaded/lazy-load-spec.js b/cypress/component/advanced/lazy-loaded/lazy-load-spec.js
index ba8f3eeb..3a451043 100644
--- a/cypress/component/advanced/lazy-loaded/lazy-load-spec.js
+++ b/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'))
diff --git a/cypress/component/advanced/material-ui-example/list-item-spec.js b/cypress/component/advanced/material-ui-example/list-item-spec.js
index aabcc8cf..c14db5df 100644
--- a/cypress/component/advanced/material-ui-example/list-item-spec.js
+++ b/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(
-
+ ,
)
- mount()
cy.contains('my example list item')
})
diff --git a/cypress/component/advanced/portal/portal-spec.js b/cypress/component/advanced/portal/portal-spec.js
index 1f08bde1..6d8b5840 100644
--- a/cypress/component/advanced/portal/portal-spec.js
+++ b/cypress/component/advanced/portal/portal-spec.js
@@ -6,18 +6,16 @@ const RenderInPortal = ({ children }) => {
return ReactDOM.createPortal(children, document.body)
}
-const MyComponent = () => (
-
-
Hello World!
-
- I am in portal
-
-
-)
-
describe('Portals', () => {
it('renders content inside the portal', () => {
- mount()
+ mount(
+
+
Hello World!
+
+ I am in portal
+
+
,
+ )
cy.contains('#component', 'Hello World!')
cy.get('#component').should('not.contain', 'I am in portal')
diff --git a/cypress/component/basic/mount-div/spec.js b/cypress/component/basic/mount-div/spec.js
new file mode 100644
index 00000000..2b99af23
--- /dev/null
+++ b/cypress/component/basic/mount-div/spec.js
@@ -0,0 +1,27 @@
+///
+///
+import React from 'react'
+import { mount } from 'cypress-react-unit-test'
+
+function Button() {
+ return
+}
+
+describe('mounting a div', () => {
+ it('works', () => {
+ mount(Works
)
+ cy.contains('Works').should('be.visible')
+ })
+
+ // https://github.com/bahmutov/cypress-react-unit-test/issues/98
+ it('mount multiple components', function() {
+ mount(
+
+
+
+
+ ,
+ )
+ cy.get('button').should('have.length', 2)
+ })
+})
diff --git a/lib/getDisplayName.ts b/lib/getDisplayName.ts
index af66e118..21676732 100644
--- a/lib/getDisplayName.ts
+++ b/lib/getDisplayName.ts
@@ -49,7 +49,9 @@ export default function getDisplayName(
}
}
- cachedDisplayNames.set(type, displayName)
+ try {
+ cachedDisplayNames.set(type, displayName)
+ } catch (e) {}
return displayName
}
diff --git a/lib/index.ts b/lib/index.ts
index 4faf26ad..2e24d9ce 100644
--- a/lib/index.ts
+++ b/lib/index.ts
@@ -45,7 +45,7 @@ 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
@@ -53,7 +53,7 @@ export const mount = (jsx: React.ReactElement, options: MountOptions = {}) => {
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')