fix: better mount command log, closes #271

Author: bahmutov

cypress/component/advanced/tutorial/square-spec.js

@@ -13,17 +13,20 @@ class Square extends React.Component {
 
   render() {
     return (
-      <button className="square" onClick={() => this.setState({ value: 'X' })}>
+      <button
+        className="square"
+        onClick={() => this.setState({ value: this.props.value })}
+      >
         {this.state.value}
       </button>
     )
   }
 }
 
 describe('Square', () => {
-  it('changes value on click', () => {
+  it.only('changes value on click', () => {
     const selector = 'button.square'
-    mount(<Square />)
+    mount(<Square value="X" />)
     // initially button is blank
     cy.get(selector).should('have.text', '')
     // but it changes text on click

lib/index.ts

@@ -56,7 +56,7 @@ export const mount = (jsx: React.ReactElement, options: MountOptions = {}) => {
       if (options.log !== false) {
         logInstance = Cypress.log({
           name: 'mount',
-          message: [`ReactDOM.render(<${displayName} ... />)`],
+          message: [`<${displayName} ... />`],
         })
       }
     })
@@ -84,15 +84,22 @@ export const mount = (jsx: React.ReactElement, options: MountOptions = {}) => {
         key,
       }
 
-      const CypressTestComponent = reactDomToUse.render(
-        React.createElement(React.Fragment, props, jsx),
-        el,
-      )
+      const reactComponent = React.createElement(React.Fragment, props, jsx)
+      const CypressTestComponent = reactDomToUse.render(reactComponent, el)
 
-      const logConsoleProps = {
-        props: jsx.props,
-      }
       if (logInstance) {
+        const logConsoleProps = {
+          props: jsx.props,
+          description: 'Mounts React component',
+          home: 'https://github.com/bahmutov/cypress-react-unit-test',
+        }
+        const componentElement = el.children[0]
+
+        if (componentElement) {
+          // @ts-ignore
+          logConsoleProps.yielded = reactDomToUse.findDOMNode(componentElement)
+        }
+
         logInstance.set('consoleProps', () => logConsoleProps)
 
         if (el.children.length) {