feat: make unmount function automatically enqueue (#319)

The command `unmount()` is enqueued into the Cypress chain automatically. The old way of calling it should still work though.

```js
import { mount, unmount } from 'cypress-react-unit-test'
it('unmounts component', () => {
  mount(<Component />)
  // interact with the component using Cypress commands

  // old unmount, still works!
  cy.then(unmount)

  // new unmount call (preferred)
  unmount()
})
```

cypress/component/advanced/renderless/mouse-spec.js

@@ -19,9 +19,10 @@ describe('Renderless component', () => {
       .trigger('mousemove')
       .then(() => {
         expect(onMoved).to.have.been.calledWith(true)
-        unmount()
       })
 
+    unmount()
+
     cy.get('@log')
       .its('callCount')
       .should('equal', 4)

cypress/component/basic/unmount/README.md

@@ -5,10 +5,12 @@ If you need to test what the component is doing when it is being unmounted, use
 ```js
 import { mount, unmount } from 'cypress-react-unit-test'
 it('calls unmount prop', () => {
+  // async command
   mount(...)
   // cy commands
-  // now let's unmount
-  cy.then(unmount)
+
+  // now let's unmount (async command)
+  unmount()
 
   // confirm the component has been unmounted
   // and performed everything needed in its

cypress/component/basic/unmount/comp-spec.js

@@ -12,11 +12,9 @@ it('calls callbacks on mount and unmount', () => {
     expect(onMount).to.have.been.calledOnce
     expect(onUnmount).to.have.not.been.called
   })
-  cy.contains('Component with')
-    .should('be.visible')
-    .then(unmount)
-    .then(() => {
-      expect(onUnmount).to.have.been.calledOnce
-    })
+  cy.contains('Component with').should('be.visible')
+  unmount().then(() => {
+    expect(onUnmount).to.have.been.calledOnce
+  })
   cy.contains('Component with').should('not.exist')
 })

cypress/component/basic/unmount/unmount-spec.js

@@ -18,12 +18,22 @@ describe('Comp with componentWillUnmount', () => {
     mount(<Comp onUnmount={cy.stub().as('onUnmount')} />)
     cy.contains('My component')
 
-    // after we have confirmed the component exists
-    // we can remove it asynchronously
-    cy.then(() => {
-      // now unmount the mounted component
-      unmount()
-    })
+    // after we have confirmed the component exists let's remove it
+    // unmount() command is automatically enqueued
+    unmount()
+
+    // the component is gone from the DOM
+    cy.contains('My component').should('not.exist')
+    // the component has called the prop on unmount
+    cy.get('@onUnmount').should('have.been.calledOnce')
+  })
+
+  it('can be called using then', () => {
+    mount(<Comp onUnmount={cy.stub().as('onUnmount')} />)
+    cy.contains('My component')
+
+    // still works, should probably be removed in v5
+    cy.then(unmount)
 
     // the component is gone from the DOM
     cy.contains('My component').should('not.exist')

lib/index.ts

@@ -139,25 +139,30 @@ export const mount = (jsx: React.ReactElement, options: MountOptions = {}) => {
 }
 
 /**
- * Removes the mounted component
+ * Removes the mounted component. Notice this command automatically
+ * queues up the `unmount` into Cypress chain, thus you don't need `.then`
+ * to call it.
  * @see https://github.com/bahmutov/cypress-react-unit-test/tree/main/cypress/component/basic/unmount
  * @example
   ```
   import { mount, unmount } from 'cypress-react-unit-test'
   it('works', () => {
     mount(...)
+    // interact with the component using Cypress commands
     // whenever you want to unmount
-    cy.then(unmount)
+    unmount()
   })
   ```
  */
 export const unmount = () => {
   checkMountModeEnabled()
 
-  cy.log('unmounting...')
-  const selector = '#' + rootId
-  return cy.get(selector, { log: false }).then($el => {
-    unmountComponentAtNode($el[0])
+  return cy.then(() => {
+    cy.log('unmounting...')
+    const selector = '#' + rootId
+    return cy.get(selector, { log: false }).then($el => {
+      unmountComponentAtNode($el[0])
+    })
   })
 }