Skip to content

Reconciler test fixes #3

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

Open
nicklive wants to merge 3 commits into
base: react-18
Choose a base branch
from
Open

Reconciler test fixes #3

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
2e84228
Fix CDN rendering according React 18 changes
Nov 16, 2022
fcd022e
Fix links to React branch
Nov 16, 2022
be68783
Fix tests in reconciler
Nov 16, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 5 additions & 4 deletions src/CDN.stories.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,8 +21,8 @@ Example with dependencies:
```html
<html>
<head>
<script crossorigin src="https://unpkg.com/react/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom/umd/react-dom.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
<script crossorigin src="https://unpkg.com/pixi.js/dist/pixi.min.js"></script>
<script crossorigin src="https://unpkg.com/@inlet/react-pixi/dist/react-pixi.umd.js"></script>
<script crossorigin src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
Expand All @@ -38,8 +38,9 @@ Example with dependencies:
<Sprite texture={PIXI.Texture.WHITE} tint={0x00ff00} />
</Stage>
)

ReactDOM.render(<App />, document.getElementById('root'))
const container = document.getElementById('root');
const root = ReactDOM.createRoot(container);
root.render(<App />);
</script>
</body>
</html>
Expand Down
4 changes: 2 additions & 2 deletions src/reconciler/hostconfig.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,8 @@
* Host Config file.
*
* See:
* https://github.com/facebook/react/tree/master/packages/react-reconciler
* https://github.com/facebook/react/blob/master/packages/react-reconciler/src/forks/ReactFiberHostConfig.custom.js
* https://github.com/facebook/react/tree/main/packages/react-reconciler
* https://github.com/facebook/react/blob/main/packages/react-reconciler/src/forks/ReactFiberHostConfig.custom.js
* -------------------------------------------
*/

Expand Down
102 changes: 52 additions & 50 deletions test/reconciler.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,10 +12,18 @@ const act = React.unstable_act

describe('reconciler', () => {
let container = new PIXI.Container()
let container1 = new PIXI.Container()
let container2 = new PIXI.Container()
container.root = true
container1.root = true
container2.root = true

let root
let root1
let root2
const renderInContainer = comp => root.render(comp)
const renderInContainer1 = comp => root1.render(comp)
const renderInContainer2 = comp => root2.render(comp)

beforeEach(() => {
jest.clearAllMocks()
Expand All @@ -24,7 +32,7 @@ describe('reconciler', () => {
})

afterEach(() => {
root.unmount()
act(() => root.unmount())
})

describe('single render', () => {
Expand Down Expand Up @@ -384,10 +392,10 @@ describe('reconciler', () => {
})
})

// TODO Suspence tests just doesn't wort right now and I can't understand why
// TODO Suspence tests just doesn't work right now and I can't understand why
// Probably the async nature interferes somehow
// Or implementation details of reconciler changed
xdescribe('suspense', () => {
describe('suspense', () => {
let asyncLoaded = false

beforeEach(() => {
Expand All @@ -408,110 +416,106 @@ describe('reconciler', () => {
return <Text text={text} />
}

test('renders suspense fallback', () => {
/**
* -------------------------------------------
* For React-18 content inside Suspense will not be rendered
*
* See:
* https://github.com/reactjs/rfcs/blob/main/text/0213-suspense-in-react-18.md#behavior-change-committed-trees-are-always-consistent
* -------------------------------------------
*/
test('renders suspense fallback', async () => {
jest.useFakeTimers()

const loadingTextRef = React.createRef(null)
const siblingTextRef = React.createRef(null)
const loadingTextRef = React.createRef()
const siblingTextRef = React.createRef()

act(() =>
await act(async () =>
renderInContainer(
<Suspense fallback={<Text text="loading" ref={loadingTextRef} />}>
<Text text="hidden" ref={siblingTextRef} />
<AsyncText ms={500} text="content" />
</Suspense>
)
)

jest.runAllTimers()

// loading Text should be rendered
// "loading" Text should be rendered
expect(loadingTextRef.current).toBeDefined()

// content should be hidden
const hideInstanceMock = getCall(hostconfig.hideInstance)
expect(hideInstanceMock.fn).toHaveBeenCalledTimes(1)
expect(siblingTextRef.current.visible).toEqual(false)
// "hidden" Text should be null
expect(siblingTextRef.current).toBeNull();
})

test('renders suspense content', () => {
jest.useFakeTimers()

const siblingTextRef = React.createRef(null)
const siblingTextRef = React.createRef()
const loadingTextRef = React.createRef()

act(() =>
renderInContainer(
<Suspense fallback={<Text text="loading" />}>
<Suspense fallback={<Text text="loading" ref={loadingTextRef} />}>
<Text text="A" ref={siblingTextRef} />
<AsyncText ms={500} text={'content'} />
<AsyncText ms={500} text="content" />
</Suspense>
)
)

expect(siblingTextRef.current).toBeNull();
jest.runAllTimers()

act(() =>
renderInContainer(
<Suspense fallback={<Text text="loading" />}>
<Suspense fallback={<Text text="loading" ref={loadingTextRef} />}>
<Text text="A" ref={siblingTextRef} />
<AsyncText ms={500} text={'content'} />
<AsyncText ms={500} text="content" />
</Suspense>
)
)

// hidden content should be visible again
expect(siblingTextRef.current.visible).toEqual(true)

// sibling text & AsyncText content is unhidden
const unhideInstanceMock = getCall(hostconfig.unhideInstance)
expect(unhideInstanceMock.fn).toHaveBeenCalledTimes(2)

// hidden content should be present again
expect(siblingTextRef.current).not.toBeNull();
// loading text, sibling text, and async text content were all created
const createInstanceMock = getCall(hostconfig.createInstance)
expect(createInstanceMock.all.map(([ins]) => ins)).toEqual(['Text', 'Text', 'Text'])
const createInstanceMock = getCall(hostconfig.createInstance);
expect(createInstanceMock.all.map(([ins, obj]) => obj.text)).toEqual(['A', 'loading', 'A', 'content'])
})
})

describe('emits request render', () => {
let spy1 = jest.fn()
let spy2 = jest.fn()
let root

let container2 = new PIXI.Container()
container2.root = true

beforeEach(() => {
spy1.mockReset()
spy2.mockReset()
container.on('__REACT_PIXI_REQUEST_RENDER__', spy1)
spy1.mockClear()
spy2.mockClear()
container1.on('__REACT_PIXI_REQUEST_RENDER__', spy1)
container2.on('__REACT_PIXI_REQUEST_RENDER__', spy2)
root = createRoot(container2)
root1 = createRoot(container1)
root2 = createRoot(container2)
})

afterEach(() => {
container.off('__REACT_PIXI_REQUEST_RENDER__', spy1)
container1.off('__REACT_PIXI_REQUEST_RENDER__', spy1)
container2.off('__REACT_PIXI_REQUEST_RENDER__', spy2)
root.unmount()
act(() => root1.unmount())
act(() => root2.unmount())
})

const renderInContainer2 = comp => root.render(comp)

it('receives request events via root container', function () {
act(() =>
renderInContainer(
renderInContainer1(
<Container>
<Text text="one" />
</Container>
)
)

expect(spy1).toHaveBeenCalled()
expect(spy1).toHaveBeenCalledTimes(2) // spy1 called 2 times: 1 - appendInitialChild, 2 - appendChildToContainer
})

// TODO Fix it, more info near the assertions
xit('receives different events in different containers', function () {
it('receives different events in different containers', function () {
act(() =>
renderInContainer(
renderInContainer1(
<Container>
<Text text="one" />
</Container>
Expand All @@ -534,11 +538,9 @@ describe('reconciler', () => {
)
)

// TODO Previously it was 1 and 2 accordingly, now it's 2 and 3
// I don't know why double render request happens
// And I don't know why it's only first time (otherwise it would be 2 and 4)
expect(spy1).toHaveBeenCalledTimes(1)
expect(spy2).toHaveBeenCalledTimes(2)
expect(spy1).toHaveBeenCalledTimes(2); // spy1 called 2 times: 1 - appendInitialChild, 2 - appendChildToContainer
expect(spy2).toHaveBeenCalledTimes(3); // spy2 called 3 times: 1 - appendInitialChild 2 - appendChildToContainer 3 - commitUpdate
})
})
})