cy.mount cannot mount multiple components

[MaxnzWZ]

Using cy.mount to mount one component can be finished successfully but failed to mount multiple components.

Please find the files in attached zip file (component.and.test.files.zip).
Button.js is the file of component. button.spec.js is the test file.
component and test files.zip
snapshot of error info

error log

cypress_runner.js:172385 Error:    TypeError: Invalid value used as weak map key
    at WeakMap.set (<anonymous>)
    at Object.getDisplayName [as default] (http://localhost:51524/__cypress/tests?p=cypress/integration/button.spec.js-500:254:24)
    at Context.exports.mount (http://localhost:51524/__cypress/tests?p=cypress/integration/button.spec.js-500:356:47)
From previous event:
    at runCommand (http://localhost:51524/__cypress/runner/cypress_runner.js:78709:14)
    at next (http://localhost:51524/__cypress/runner/cypress_runner.js:78793:14)
From previous event:
    at http://localhost:51524/__cypress/runner/cypress_runner.js:78812:37
From previous event:
    at run (http://localhost:51524/__cypress/runner/cypress_runner.js:78810:15)
    at Object.cy.<computed> [as mount] (http://localhost:51524/__cypress/runner/cypress_runner.js:79038:11)
    at Context.runnable.fn (http://localhost:51524/__cypress/runner/cypress_runner.js:79168:20)
    at callFn (http://localhost:51524/__cypress/runner/cypress_runner.js:51457:21)
    at Test.Runnable.run (http://localhost:51524/__cypress/runner/cypress_runner.js:51450:7)
    at http://localhost:51524/__cypress/runner/cypress_runner.js:82159:28
From previous event:
    at Object.onRunnableRun (http://localhost:51524/__cypress/runner/cypress_runner.js:82154:20)
    at $Cypress.action (http://localhost:51524/__cypress/runner/cypress_runner.js:77456:51)
    at Test.Runnable.run (http://localhost:51524/__cypress/runner/cypress_runner.js:81220:20)
    at Runner.runTest (http://localhost:51524/__cypress/runner/cypress_runner.js:51920:10)
    at http://localhost:51524/__cypress/runner/cypress_runner.js:52026:12
    at next (http://localhost:51524/__cypress/runner/cypress_runner.js:51840:14)
    at http://localhost:51524/__cypress/runner/cypress_runner.js:51850:7
    at next (http://localhost:51524/__cypress/runner/cypress_runner.js:51782:14)
    at http://localhost:51524/__cypress/runner/cypress_runner.js:51818:5
    at timeslice (http://localhost:51524/__cypress/runner/cypress_runner.js:47059:27)

[dmtrKovalenko]

This actually means that you are trying to inject a raw jsx to the ReactDOM.render (here). Then displayName will be undefined and undefined is an invalid value for WeakMap.

Wrap your components into another component should help, but it looks like a thing that needs to be fixed. I can open a PR cc @bahmutov

[bahmutov]

yeah, still a "problem" in v4

// DOES NOT WORK YET
mount(<div>I am a div</div>)

[bahmutov]

Important to solve this, because a lot of examples adjust a component like this

import MyComponent from './component'
mount(
  <div class="app>
    <MyComponent />
  </div>
)

With this bug, the user 1) gets a cryptic error 2) has to create a dummy component just to make it work

import MyComponent from './component'
const TestMyComponent = (
  <div class="app>
    <MyComponent />
  </div>
)
mount(<TestMyComponent />)

[bahmutov]

🎉 This issue has been resolved in version 4.1.5 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀