feat: move alias to options object

BREAKING CHANGE: instead of element, alias, then options object
the new syntax has only an element and optional options object.

```js
cy.mount(<HelloX name='World' />, {alias: 'HelloX'})
```

Author: bahmutov

cypress/integration/alias-spec.js

@@ -0,0 +1,15 @@
+/// <reference types="cypress" />
+/// <reference types="../../lib" />
+import {HelloX} from '../../src/hello-x.jsx'
+import React from 'react'
+
+/* eslint-env mocha */
+describe('Alias', () => {
+  it('uses default display name', () => {
+    cy.mount(<HelloX name='World' />, {alias: 'HelloX'})
+      .then(function () {
+        expect(this.HelloX).to.be.an('object')
+      })
+    cy.get('@HelloX').should('be.an', 'object')
+  })
+})

cypress/integration/inject-style-spec.js

@@ -36,15 +36,15 @@ describe('Injecting style', () => {
         color: white;
       }
     `
-    cy.mount(<Button name='Orange' orange />, null, { style })
+    cy.mount(<Button name='Orange' orange />, { style })
     cy.get('.orange button')
       .should('have.css', 'background-color', 'rgb(245, 146, 62)')
   })
 
   it('read CSS file and pass as style', () => {
     cy.readFile('cypress/integration/Button.css')
     .then(style => {
-      cy.mount(<Button name='Orange' orange />, null, { style })
+      cy.mount(<Button name='Orange' orange />, { style })
     })
 
     cy.get('.component-button')
@@ -55,7 +55,7 @@ describe('Injecting style', () => {
 
   it('can be read automatically', () => {
     const cssFile = 'cypress/integration/Button.css'
-    cy.mount(<Button name='Orange' orange />, null, { cssFile })
+    cy.mount(<Button name='Orange' orange />, { cssFile })
     cy.get('.orange button')
       .should('have.css', 'background-color', 'rgb(245, 146, 62)')
   })
@@ -70,14 +70,14 @@ describe('Injecting style', () => {
     it('is orange', function () {
       // notice we use "function () {}" callback
       // to get the test context "this" to be able to use "this.style"
-      cy.mount(<Button name='Orange' orange />, null, { style: this.style })
+      cy.mount(<Button name='Orange' orange />, { style: this.style })
 
       cy.get('.orange button')
       .should('have.css', 'background-color', 'rgb(245, 146, 62)')
     })
 
     it('is orange again', function () {
-      cy.mount(<Button name='Orange' orange />, null, { style: this.style })
+      cy.mount(<Button name='Orange' orange />, { style: this.style })
 
       cy.get('.orange button')
       .should('have.css', 'background-color', 'rgb(245, 146, 62)')

lib/getDisplayName.ts

@@ -9,6 +9,11 @@ const cachedDisplayNames: WeakMap<JSX, string> = new WeakMap();
  * @link https://github.com/facebook/react-devtools/blob/master/backend/getDisplayName.js
  */
 export default function getDisplayName(type: JSX, fallbackName: string = 'Unknown'): string {
+  if (type === undefined) {
+    // something is terrible wrong with this JSX element
+    throw new Error(`Something is wrong with this element "${type}" with fallback "${fallbackName}"`)
+  }
+
   const nameFromCache = cachedDisplayNames.get(type)
 
   if (nameFromCache != null) {

lib/index.d.ts

@@ -27,6 +27,11 @@ interface JSXElement {
 type filepath = string
 
 interface MountOptions {
+  /**
+   * How to refer to this component later on.
+   * Usually automatic.
+   */
+  alias: string,
   /**
    * CSS string to inject as a style element
    * before mounting the component.
@@ -65,7 +70,7 @@ declare namespace Cypress {
     ```
     import Hello from './hello.jsx'
     // mount and access by alias
-    cy.mount(<Hello />, 'Hello')
+    cy.mount(<Hello />, {alias: 'Hello'})
     // using default alias
     cy.get('@Component')
     // using specified alias
@@ -74,7 +79,7 @@ declare namespace Cypress {
     cy.get(Hello)
     ```
     **/
-    mount: (component: JSXElement, alias?: string, options?: Partial<MountOptions>) => Chainable<void>
+    mount: (component: JSXElement, options?: Partial<MountOptions>) => Chainable<void>
     get<S = any>(alias: string | symbol | Function, options?: Partial<Loggable & Timeoutable>): Chainable<any>
     /**
      * Utility method to re-render a new / updated component

lib/index.ts

@@ -128,10 +128,10 @@ const injectStyle = (options?: Partial<MountOptions>) => (w: Window) => {
  cy.get(Hello)
  ```
  **/
-export const mount = (jsx: JSXElement, alias?: string, options?: Partial<MountOptions>) => {
+export const mount = (jsx: JSXElement, options: Partial<MountOptions> = {}) => {
   // Get the display name property via the component constructor
   const jsxType = typeof jsx.type === 'string' ? jsx as unknown as JSX : jsx.type
-  const displayname = getDisplayName(jsxType, alias)
+  const displayname = getDisplayName(jsxType, options.alias)
 
   let cmd: Cypress.Log;
 
@@ -163,7 +163,7 @@ export const mount = (jsx: JSXElement, alias?: string, options?: Partial<MountOp
         render(jsx)
       }
       const component = render(jsx);
-      cy.wrap(component, { log: false }).as(alias || displayname)
+      cy.wrap(component, { log: false }).as(options.alias || displayname)
     })
   cy.copyComponentStyles(jsx)
     .then(() => {