Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix: make component derived info not throw #24571

Merged
merged 3 commits into from Nov 7, 2022
Merged

fix: make component derived info not throw #24571

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
ce0e9c2
fix: make component derived info not throw
ZachJW34 Nov 7, 2022
d5b8343
update snapshots
ZachJW34 Nov 7, 2022
7a390d3
more snapshots updates
ZachJW34 Nov 7, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
2 changes: 1 addition & 1 deletion npm/angular/src/mount.ts
View file
Open in desktop
Expand Up @@ -156,7 +156,7 @@ function bootstrapModule<T> (
})

// check if the component is a standalone component
if ((component as any).ɵcmp.standalone) {
if ((component as any).ɵcmp?.standalone) {
lmiller1990 marked this conversation as resolved.
Show resolved Hide resolved
testModuleMetaData.imports.push(component)
} else {
testModuleMetaData.declarations.push(component)
Expand Down
14 changes: 7 additions & 7 deletions npm/react/src/createMount.ts
View file
Open in desktop
Expand Up @@ -40,12 +40,6 @@ export const makeMountFn = (

mountCleanup = internalMountOptions.cleanup

// Get the display name property via the component constructor
// @ts-ignore FIXME
const componentName = getDisplayName(jsx.type)

const jsxComponentName = `<${componentName} ... />`

return cy
.then(() => {
const reactDomToUse = internalMountOptions.reactDom
Expand Down Expand Up @@ -99,6 +93,12 @@ export const makeMountFn = (
.wait(0, { log: false })
.then(() => {
if (options.log !== false) {
// Get the display name property via the component constructor
// @ts-ignore FIXME
const componentName = getDisplayName(jsx)

const jsxComponentName = `<${componentName} ... />`

Cypress.log({
name: type,
type: 'parent',
Expand All @@ -108,7 +108,7 @@ export const makeMountFn = (
consoleProps: () => {
return {
// @ts-ignore protect the use of jsx functional components use ReactNode
props: jsx.props,
props: jsx?.props,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think React defaults to an empty object for no props?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe when creating the component but jsx here is just the first argument to mount, so passing cy.mount(null) would throw. I know it doesn't make sense to do that, but the types allow it and React doesn't throw so I thought I'd be safe here.

description: type === 'mount' ? 'Mounts React component' : 'Rerenders mounted React component',
home: 'https://github.com/cypress-io/cypress',
}
Expand Down
18 changes: 6 additions & 12 deletions npm/react/src/getDisplayName.ts
View file
Open in desktop
@@ -1,6 +1,6 @@
type JSX = Function & { displayName: string }
import type { ReactNode } from 'react'

const cachedDisplayNames: WeakMap<JSX, string> = new WeakMap()
type JSX = Function & { displayName: string }

/**
* Gets the display name of the component when possible.
Expand All @@ -9,13 +9,13 @@ 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,
node: ReactNode,
fallbackName: string = 'Unknown',
): string {
const nameFromCache = cachedDisplayNames.get(type)
const type: JSX | undefined = (node as any)?.type

if (nameFromCache != null) {
return nameFromCache
if (!type) {
return fallbackName
}

let displayName: string | null = null
Expand Down Expand Up @@ -49,11 +49,5 @@ export default function getDisplayName (
}
}

try {
cachedDisplayNames.set(type, displayName)
} catch (e) {
// do nothing
}

return displayName
}
5 changes: 1 addition & 4 deletions npm/vue/src/index.ts
View file
Open in desktop
Expand Up @@ -370,7 +370,7 @@ export function mount<
* Mounts a component and returns an object containing the component and VueWrapper
* @param componentOptions
* @param options
* @returns {Cypress.Chainable<{wrapper: VueWrapper<T>, component: T}
* @returns {Cypress.Chainable<{wrapper: VueWrapper<T>, component: T}>}
* @see {@link https://on.cypress.io/mounting-vue} for more details.
* @example
* import { mount } from '@cypress/vue'
Expand All @@ -387,9 +387,6 @@ export function mount (componentOptions: any, options: any = {}) {
// Remove last mounted component if cy.mount is called more than once in a test
cleanup()

// TODO: get the real displayName and props from VTU shallowMount
const componentName = getComponentDisplayName(componentOptions)

// then wait for cypress to load
return cy.then(() => {
// @ts-ignore
Expand Down
44 changes: 24 additions & 20 deletions system-tests/__snapshots__/component_testing_spec.ts.js
View file
Open in desktop
Expand Up @@ -156,19 +156,20 @@ exports['React major versions with Webpack executes all of the tests for React v


mount
✓ does not error when rendering primitives
teardown
✓ should mount
✓ should remove previous mounted component


2 passing
3 passing


(Results)

┌────────────────────────────────────────────────────────────────────────────────────────────────┐
│ Tests: 2 │
│ Passing: 2 │
│ Tests: 3 │
│ Passing: 3 │
│ Failing: 0 │
│ Pending: 0 │
│ Skipped: 0 │
Expand Down Expand Up @@ -200,9 +201,9 @@ exports['React major versions with Webpack executes all of the tests for React v
├────────────────────────────────────────────────────────────────────────────────────────────────┤
│ ✔ Rerendering.cy.jsx XX:XX 1 1 - - - │
├────────────────────────────────────────────────────────────────────────────────────────────────┤
│ ✔ mount.cy.jsx XX:XX 2 2 - - - │
│ ✔ mount.cy.jsx XX:XX 3 3 - - - │
└────────────────────────────────────────────────────────────────────────────────────────────────┘
✔ All specs passed! XX:XX 9 9 - - -
✔ All specs passed! XX:XX 10 10 - - -


`
Expand Down Expand Up @@ -365,19 +366,20 @@ exports['React major versions with Webpack executes all of the tests for React v


mount
✓ does not error when rendering primitives
teardown
✓ should mount
✓ should remove previous mounted component


2 passing
3 passing


(Results)

┌────────────────────────────────────────────────────────────────────────────────────────────────┐
│ Tests: 2 │
│ Passing: 2 │
│ Tests: 3 │
│ Passing: 3 │
│ Failing: 0 │
│ Pending: 0 │
│ Skipped: 0 │
Expand Down Expand Up @@ -409,9 +411,9 @@ exports['React major versions with Webpack executes all of the tests for React v
├────────────────────────────────────────────────────────────────────────────────────────────────┤
│ ✔ Rerendering.cy.jsx XX:XX 1 1 - - - │
├────────────────────────────────────────────────────────────────────────────────────────────────┤
│ ✔ mount.cy.jsx XX:XX 2 2 - - - │
│ ✔ mount.cy.jsx XX:XX 3 3 - - - │
└────────────────────────────────────────────────────────────────────────────────────────────────┘
✔ All specs passed! XX:XX 9 9 - - -
✔ All specs passed! XX:XX 10 10 - - -


`
Expand Down Expand Up @@ -573,19 +575,20 @@ exports['React major versions with Vite executes all of the tests for React v17


mount
✓ does not error when rendering primitives
teardown
✓ should mount
✓ should remove previous mounted component


2 passing
3 passing


(Results)

┌────────────────────────────────────────────────────────────────────────────────────────────────┐
│ Tests: 2 │
│ Passing: 2 │
│ Tests: 3 │
│ Passing: 3 │
│ Failing: 0 │
│ Pending: 0 │
│ Skipped: 0 │
Expand Down Expand Up @@ -617,9 +620,9 @@ exports['React major versions with Vite executes all of the tests for React v17
├────────────────────────────────────────────────────────────────────────────────────────────────┤
│ ✔ Rerendering.cy.jsx XX:XX 1 1 - - - │
├────────────────────────────────────────────────────────────────────────────────────────────────┤
│ ✔ mount.cy.jsx XX:XX 2 2 - - - │
│ ✔ mount.cy.jsx XX:XX 3 3 - - - │
└────────────────────────────────────────────────────────────────────────────────────────────────┘
✔ All specs passed! XX:XX 9 9 - - -
✔ All specs passed! XX:XX 10 10 - - -


`
Expand Down Expand Up @@ -781,19 +784,20 @@ exports['React major versions with Vite executes all of the tests for React v18


mount
✓ does not error when rendering primitives
teardown
✓ should mount
✓ should remove previous mounted component


2 passing
3 passing


(Results)

┌────────────────────────────────────────────────────────────────────────────────────────────────┐
│ Tests: 2 │
│ Passing: 2 │
│ Tests: 3 │
│ Passing: 3 │
│ Failing: 0 │
│ Pending: 0 │
│ Skipped: 0 │
Expand Down Expand Up @@ -825,9 +829,9 @@ exports['React major versions with Vite executes all of the tests for React v18
├────────────────────────────────────────────────────────────────────────────────────────────────┤
│ ✔ Rerendering.cy.jsx XX:XX 1 1 - - - │
├────────────────────────────────────────────────────────────────────────────────────────────────┤
│ ✔ mount.cy.jsx XX:XX 2 2 - - - │
│ ✔ mount.cy.jsx XX:XX 3 3 - - - │
└────────────────────────────────────────────────────────────────────────────────────────────────┘
✔ All specs passed! XX:XX 9 9 - - -
✔ All specs passed! XX:XX 10 10 - - -


`
Expand Down