-
Notifications
You must be signed in to change notification settings - Fork 3.1k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(component-testing): breaking: Add React rerender functionality (#…
- Loading branch information
Showing
9 changed files
with
168 additions
and
64 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file was deleted.
Oops, something went wrong.
Binary file not shown.
This file was deleted.
Oops, something went wrong.
17 changes: 17 additions & 0 deletions
17
npm/react/cypress/component/basic/rerender/different-element.spec.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,17 @@ | ||
/// <reference types="cypress" /> | ||
import React from 'react' | ||
import { mount } from '@cypress/react' | ||
|
||
it('should properly handle swapping components', () => { | ||
const Component1 = ({ input }) => { | ||
return <div>{input}</div> | ||
} | ||
|
||
const Component2 = ({ differentProp }) => { | ||
return <div style={{ backgroundColor: 'blue' }}>{differentProp}</div> | ||
} | ||
|
||
mount(<Component1 input="0" />).then(({ rerender }) => { | ||
rerender(<Component2 differentProp="1" />).get('body').should('contain', '1').should('not.contain', '0') | ||
}) | ||
}) |
67 changes: 67 additions & 0 deletions
67
npm/react/cypress/component/basic/rerender/effects.spec.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,67 @@ | ||
/// <reference types="cypress" /> | ||
import React, { useLayoutEffect, useEffect } from 'react' | ||
import { mount } from '@cypress/react' | ||
|
||
it('should not run unmount effect cleanup when rerendering', () => { | ||
const layoutEffectCleanup = cy.stub() | ||
const effectCleanup = cy.stub() | ||
|
||
const Component = ({ input }) => { | ||
useLayoutEffect(() => { | ||
return layoutEffectCleanup | ||
}, [input]) | ||
|
||
useEffect(() => { | ||
return effectCleanup | ||
}, []) | ||
|
||
return <div>{input}</div> | ||
} | ||
|
||
mount(<Component input="0" />).then(({ rerender }) => { | ||
expect(layoutEffectCleanup).to.have.been.callCount(0) | ||
expect(effectCleanup).to.have.been.callCount(0) | ||
|
||
rerender(<Component input="0" />).then(() => { | ||
expect(layoutEffectCleanup).to.have.been.callCount(0) | ||
expect(effectCleanup).to.have.been.callCount(0) | ||
}) | ||
|
||
rerender(<Component input="1" />).then(() => { | ||
expect(layoutEffectCleanup).to.have.been.callCount(1) | ||
expect(effectCleanup).to.have.been.callCount(0) | ||
}) | ||
}) | ||
}) | ||
|
||
it('should run unmount effect cleanup when unmounting', () => { | ||
const layoutEffectCleanup = cy.stub() | ||
const effectCleanup = cy.stub() | ||
|
||
const Component = ({ input }) => { | ||
useLayoutEffect(() => { | ||
return layoutEffectCleanup | ||
}, []) | ||
|
||
useEffect(() => { | ||
return effectCleanup | ||
}, []) | ||
|
||
return <div>{input}</div> | ||
} | ||
|
||
mount(<Component input="0" />).then(({ rerender, unmount }) => { | ||
expect(layoutEffectCleanup).to.have.been.callCount(0) | ||
expect(effectCleanup).to.have.been.callCount(0) | ||
|
||
rerender(<Component input="1" />).then(() => { | ||
expect(layoutEffectCleanup).to.have.been.callCount(0) | ||
expect(effectCleanup).to.have.been.callCount(0) | ||
}) | ||
|
||
unmount().then(() => { | ||
expect(layoutEffectCleanup).to.have.been.callCount(1) | ||
expect(effectCleanup).to.have.been.callCount(1) | ||
}) | ||
}) | ||
}) |
13 changes: 13 additions & 0 deletions
13
npm/react/cypress/component/basic/rerender/input-accumulator.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,13 @@ | ||
import React, { useEffect, useState } from 'react' | ||
|
||
export const InputAccumulator = ({ input }) => { | ||
const [store, setStore] = useState([]) | ||
|
||
useEffect(() => { | ||
setStore((prev) => [...prev, input]) | ||
}, [input]) | ||
|
||
return (<ul> | ||
{store.map((v) => <li key={v}>{v}</li>)} | ||
</ul>) | ||
} |
20 changes: 20 additions & 0 deletions
20
npm/react/cypress/component/basic/rerender/input-accumulator.spec.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,20 @@ | ||
/// <reference types="cypress" /> | ||
import React from 'react' | ||
import { mount } from '@cypress/react' | ||
import { InputAccumulator } from './input-accumulator' | ||
|
||
it('should rerender preserving input values', () => { | ||
mount(<InputAccumulator input="initial" />).then(({ rerender }) => { | ||
cy.get('li').eq(0).contains('initial') | ||
|
||
rerender(<InputAccumulator input="Rerendered value" />) | ||
cy.get('li:nth-child(1)').should('contain', 'initial') | ||
cy.get('li:nth-child(2)').should('contain', 'Rerendered value') | ||
|
||
rerender(<InputAccumulator input="Second rerendered value" />) | ||
|
||
cy.get('li:nth-child(1)').should('contain', 'initial') | ||
cy.get('li:nth-child(2)').should('contain', 'Rerendered value') | ||
cy.get('li:nth-child(3)').should('contain', 'Second rerendered value') | ||
}) | ||
}) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
ee8b918
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Circle has built the
linux x64
version of the Test Runner.Learn more about this pre-release platform-specific build at https://on.cypress.io/installing-cypress#Install-pre-release-version.
Run this command to install the pre-release locally:
ee8b918
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
AppVeyor has built the
win32 ia32
version of the Test Runner.Learn more about this pre-release platform-specific build at https://on.cypress.io/installing-cypress#Install-pre-release-version.
Run this command to install the pre-release locally:
ee8b918
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
AppVeyor has built the
win32 x64
version of the Test Runner.Learn more about this pre-release platform-specific build at https://on.cypress.io/installing-cypress#Install-pre-release-version.
Run this command to install the pre-release locally:
ee8b918
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Circle has built the
darwin x64
version of the Test Runner.Learn more about this pre-release platform-specific build at https://on.cypress.io/installing-cypress#Install-pre-release-version.
Run this command to install the pre-release locally: