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')