Skip to content

React 19 support #3985

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

Merged
mweststrate merged 13 commits into from
Dec 11, 2024
Merged

React 19 support #3985

Show file tree
Hide file tree
Changes from 10 commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
71f03ee
deprecate `IObserver` options and its properties in JSDoc
imjordanxd Oct 14, 2024
763fea1
Merge branch 'mobxjs:main' into main
imjordanxd Dec 9, 2024
e160182
Preparing for React 19 - some tests fail
imjordanxd Dec 9, 2024
461c5e7
RTL hooks error
imjordanxd Dec 9, 2024
b9da1d6
skipping legacy context tests
imjordanxd Dec 10, 2024
92b9b2d
skipping propTypes and defaultProps forwarding tests
imjordanxd Dec 10, 2024
907dd70
skipping class propTypes test
imjordanxd Dec 10, 2024
90a2272
render time check
imjordanxd Dec 10, 2024
9ce6d94
changed some assertions
imjordanxd Dec 11, 2024
012bf17
added extra render
imjordanxd Dec 11, 2024
1532c2e
added todo
imjordanxd Dec 11, 2024
58b3605
added warning for legacy context types in function components
imjordanxd Dec 11, 2024
f1dbfeb
added changeset
mweststrate Dec 11, 2024
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
7 changes: 3 additions & 4 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,8 +35,7 @@
"@changesets/cli": "^2.11.0",
"@testing-library/dom": "^10.4.0",
"@testing-library/jest-dom": "^5.16.4",
"@testing-library/react": "^16.0.1",
"@testing-library/react-hooks": "7.0.2",
"@testing-library/react": "^16.1.0",
"@types/jest": "^26.0.15",
"@types/node": "18",
"@types/prop-types": "^15.5.2",
Expand All @@ -62,8 +61,8 @@
"prettier": "^2.8.4",
"pretty-quick": "3.1.0",
"prop-types": "15.6.2",
"react": "^18.0.0",
"react-dom": "^18.0.0",
"react": "^19.0.0",
"react-dom": "^19.0.0",
"react-test-renderer": "^18.0.0",
"serializr": "^2.0.3",
"tape": "^5.0.1",
Expand Down
4 changes: 2 additions & 2 deletions packages/mobx-react-lite/__tests__/observer.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ function runTestSuite(mode: "observer" | "useObserver") {
list: 0
}

const TodoItem = obsComponent(({ todo }: { todo: typeof store.todos[0] }) => {
const TodoItem = obsComponent(({ todo }: { todo: (typeof store.todos)[0] }) => {
renderings.item++
return <li>|{todo.title}</li>
}, true)
Expand Down Expand Up @@ -997,7 +997,7 @@ it("dependencies should not become temporarily unobserved", async () => {
expect(doubleDisposed).toBeCalledTimes(1)
})

it("Legacy context support", () => {
Comment thread
imjordanxd marked this conversation as resolved.
it.skip("Legacy context support", () => {
const contextKey = "key"
const contextValue = "value"

Expand Down
74 changes: 53 additions & 21 deletions packages/mobx-react-lite/__tests__/useAsObservableSource.deprecated.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import { act, cleanup, render } from "@testing-library/react"
import { renderHook } from "@testing-library/react-hooks"
import { act, cleanup, render, renderHook } from "@testing-library/react"
import { autorun, configure, observable } from "mobx"
import * as React from "react"
import { useEffect, useState } from "react"
Expand Down Expand Up @@ -81,7 +80,7 @@ describe("base useAsObservableSource should work", () => {
})
expect(container.querySelector("span")!.innerHTML).toBe("22")
expect(counterRender).toBe(2)
expect(observerRender).toBe(3)
expect(observerRender).toBe(4)
expect(consoleWarnMock).toMatchSnapshot()
})

Expand Down Expand Up @@ -288,29 +287,62 @@ describe("combining observer with props and stores", () => {
describe("enforcing actions", () => {
it("'never' should work", () => {
configure({ enforceActions: "never" })
const { result } = renderHook(() => {
const [thing, setThing] = React.useState("world")
useAsObservableSource({ hello: thing })
useEffect(() => setThing("react"), [])
})
expect(result.error).not.toBeDefined()
const onError = jest.fn()
renderHook(
() => {
const [thing, setThing] = React.useState("world")
useAsObservableSource({ hello: thing })
useEffect(() => setThing("react"), [])
},
{
wrapper: class extends React.Component<React.PropsWithChildren> {
componentDidCatch = onError
render() {
return this.props.children
}
}
}
)
expect(onError).not.toBeCalled()
})
it("only when 'observed' should work", () => {
configure({ enforceActions: "observed" })
const { result } = renderHook(() => {
const [thing, setThing] = React.useState("world")
useAsObservableSource({ hello: thing })
useEffect(() => setThing("react"), [])
})
expect(result.error).not.toBeDefined()
const onError = jest.fn()
renderHook(
() => {
const [thing, setThing] = React.useState("world")
useAsObservableSource({ hello: thing })
useEffect(() => setThing("react"), [])
},
{
wrapper: class extends React.Component<React.PropsWithChildren> {
componentDidCatch = onError
render() {
return this.props.children
}
}
}
)
expect(onError).not.toBeCalled()
})
it("'always' should work", () => {
configure({ enforceActions: "always" })
const { result } = renderHook(() => {
const [thing, setThing] = React.useState("world")
useAsObservableSource({ hello: thing })
useEffect(() => setThing("react"), [])
})
expect(result.error).not.toBeDefined()
const onError = jest.fn()
renderHook(
() => {
const [thing, setThing] = React.useState("world")
useAsObservableSource({ hello: thing })
useEffect(() => setThing("react"), [])
},
{
wrapper: class extends React.Component<React.PropsWithChildren> {
componentDidCatch = onError
render() {
return this.props.children
}
}
}
)
expect(onError).not.toBeCalled()
})
})
72 changes: 52 additions & 20 deletions packages/mobx-react-lite/__tests__/useAsObservableSource.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import { act, cleanup, render } from "@testing-library/react"
import { renderHook } from "@testing-library/react-hooks"
import { act, cleanup, render, renderHook } from "@testing-library/react"
import mockConsole from "jest-mock-console"
import { autorun, configure, observable } from "mobx"
import * as React from "react"
Expand Down Expand Up @@ -351,30 +350,63 @@ describe("combining observer with props and stores", () => {
describe("enforcing actions", () => {
it("'never' should work", () => {
configure({ enforceActions: "never" })
const { result } = renderHook(() => {
const [thing, setThing] = React.useState("world")
useLocalObservable(() => ({ hello: thing }))
useEffect(() => setThing("react"), [])
})
expect(result.error).not.toBeDefined()
const onError = jest.fn()
renderHook(
() => {
const [thing, setThing] = React.useState("world")
useLocalObservable(() => ({ hello: thing }))
useEffect(() => setThing("react"), [])
},
{
wrapper: class extends React.Component<React.PropsWithChildren> {
componentDidCatch = onError
render() {
return this.props.children
}
}
}
)
expect(onError).not.toBeCalled()
})
it("only when 'observed' should work", () => {
configure({ enforceActions: "observed" })
const { result } = renderHook(() => {
const [thing, setThing] = React.useState("world")
useLocalObservable(() => ({ hello: thing }))
useEffect(() => setThing("react"), [])
})
expect(result.error).not.toBeDefined()
const onError = jest.fn()
renderHook(
() => {
const [thing, setThing] = React.useState("world")
useLocalObservable(() => ({ hello: thing }))
useEffect(() => setThing("react"), [])
},
{
wrapper: class extends React.Component<React.PropsWithChildren> {
componentDidCatch = onError
render() {
return this.props.children
}
}
}
)
expect(onError).not.toBeCalled()
})
it("'always' should work", () => {
configure({ enforceActions: "always" })
const { result } = renderHook(() => {
const [thing, setThing] = React.useState("world")
useLocalObservable(() => ({ hello: thing }))
useEffect(() => setThing("react"), [])
})
expect(result.error).not.toBeDefined()
const onError = jest.fn()
renderHook(
() => {
const [thing, setThing] = React.useState("world")
useLocalObservable(() => ({ hello: thing }))
useEffect(() => setThing("react"), [])
},
{
wrapper: class extends React.Component<React.PropsWithChildren> {
componentDidCatch = onError
render() {
return this.props.children
}
}
}
)
expect(onError).not.toBeCalled()
})
})

Expand Down
138 changes: 85 additions & 53 deletions packages/mobx-react-lite/__tests__/useLocalObservable.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import * as mobx from "mobx"
import * as React from "react"
import { renderHook } from "@testing-library/react-hooks"
import { act, cleanup, fireEvent, render } from "@testing-library/react"
import { act, cleanup, fireEvent, render, renderHook } from "@testing-library/react"

import { Observer, observer, useLocalObservable } from "../src"
import { useEffect, useState } from "react"
Expand Down Expand Up @@ -440,75 +439,108 @@ describe("enforcing actions", () => {
mobx.configure({ enforceActions: "never" })
consoleWarnMock = jest.spyOn(console, "warn").mockImplementation(() => {})

const { result } = renderHook(() => {
const [multiplier, setMultiplier] = React.useState(2)
const store = useLocalObservable(() => ({
multiplier,
count: 10,
get multiplied() {
return this.multiplier * this.count
},
inc() {
this.count += 1
const onError = jest.fn()
const { result } = renderHook(
() => {
const [multiplier, setMultiplier] = React.useState(2)
const store = useLocalObservable(() => ({
multiplier,
count: 10,
get multiplied() {
return this.multiplier * this.count
},
inc() {
this.count += 1
}
}))
useEffect(() => {
store.multiplier = multiplier
}, [multiplier])
useEffect(() => setMultiplier(3), [])
},
{

@mweststrate mweststrate Dec 11, 2024

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

NIT: This pattern reoccures quite a few times in the test, might be nice to make a utility for it? (separate PR is fine if interested)

wrapper: class extends React.Component<React.PropsWithChildren> {
componentDidCatch = onError
render() {
return this.props.children
}
}
}))
useEffect(() => {
store.multiplier = multiplier
}, [multiplier])
useEffect(() => setMultiplier(3), [])
})
}
)

expect(result.error).not.toBeDefined()
expect(onError).not.toBeCalled()
expect(consoleWarnMock).not.toBeCalled()
})
it("only when 'observed' should work", () => {
mobx.configure({ enforceActions: "observed" })
consoleWarnMock = jest.spyOn(console, "warn").mockImplementation(() => {})

const { result } = renderHook(() => {
const [multiplier, setMultiplier] = React.useState(2)
const store = useLocalObservable(() => ({
multiplier,
count: 10,
get multiplied() {
return this.multiplier * this.count
},
inc() {
this.count += 1
const onError = jest.fn()
renderHook(
() => {
const [multiplier, setMultiplier] = React.useState(2)
const store = useLocalObservable(() => ({
multiplier,
count: 10,
get multiplied() {
return this.multiplier * this.count
},
inc() {
this.count += 1
}
}))
useEffect(() => {
store.multiplier = multiplier
}, [multiplier])
useEffect(() => setMultiplier(3), [])
},
{
wrapper: class extends React.Component<React.PropsWithChildren> {
componentDidCatch = onError
render() {
return this.props.children
}
}
}))
useEffect(() => {
store.multiplier = multiplier
}, [multiplier])
useEffect(() => setMultiplier(3), [])
})
}
)

expect(result.error).not.toBeDefined()
expect(onError).not.toBeCalled()
expect(consoleWarnMock).not.toBeCalled()
})
it("'always' should work", () => {
mobx.configure({ enforceActions: "always" })
consoleWarnMock = jest.spyOn(console, "warn").mockImplementation(() => {})

const { result } = renderHook(() => {
const [multiplier, setMultiplier] = React.useState(2)
const store = useLocalObservable(() => ({
multiplier,
count: 10,
get multiplied() {
return this.multiplier * this.count
},
inc() {
this.count += 1
const onError = jest.fn()
renderHook(
() => {
const [multiplier, setMultiplier] = React.useState(2)
const store = useLocalObservable(() => ({
multiplier,
count: 10,
get multiplied() {
return this.multiplier * this.count
},
inc() {
this.count += 1
}
}))
useEffect(() => {
store.multiplier = multiplier
}, [multiplier])
useEffect(() => setMultiplier(3), [])
},
{
wrapper: class extends React.Component<React.PropsWithChildren> {
componentDidCatch = onError
render() {
return this.props.children
}
}
}))
useEffect(() => {
store.multiplier = multiplier
}, [multiplier])
useEffect(() => setMultiplier(3), [])
})
}
)

expect(result.error).not.toBeDefined()
expect(onError).not.toBeCalled()
expect(consoleWarnMock).toBeCalledTimes(2)
})
})
Loading