Restructure Provider component tests

test/Provider.test.js

@@ -4,6 +4,19 @@ import { render } from "@testing-library/react"
 import { MobXProviderContext } from "../src/Provider"
 
 describe("Provider", () => {
+ it("should work in a simple case", () => {
+ function A() {
+ return (
+ <Provider foo="bar">
+ <MobXProviderContext.Consumer>{({ foo }) => foo}</MobXProviderContext.Consumer>
+ </Provider>
+ )
+ }
+
+ const { container } = render(<A />)
+ expect(container).toHaveTextContent("bar")
+ })
+
  it("should not provide the children prop", () => {
  function A() {
  return (
@@ -22,4 +35,55 @@ describe("Provider", () => {
  const { container } = render(<A />)
  expect(container).toHaveTextContent("children was not provided")
  })
+
+ it("supports overriding stores", () => {
+ function B() {
+ return (
+ <MobXProviderContext.Consumer>
+ {({ overridable, nonOverridable }) => `${overridable} ${nonOverridable}`}
+ </MobXProviderContext.Consumer>
+ )
+ }
+
+ function A() {
+ return (
+ <Provider overridable="original" nonOverridable="original">
+ <B />
+ <Provider overridable="overriden">
+ <B />
+ </Provider>
+ </Provider>
+ )
+ }
+ const { container } = render(<A />)
+ expect(container).toMatchInlineSnapshot(`
+<div>
+ original original
+ overriden original
+</div>
+`)
+ })
+
+ it("should throw an error when changing stores", () => {
+ const baseError = console.error
+ console.error = () => {}
+
+ function A({ foo }) {
+ return (
+ <Provider foo={foo}>
+ <MobXProviderContext.Consumer>{({ foo }) => foo}</MobXProviderContext.Consumer>
+ </Provider>
+ )
+ }
+
+ const { rerender } = render(<A foo={1} />)
+
+ expect(() => {
+ rerender(<A foo={2} />)
+ }).toThrow(
+ "The set of provided stores has changed. Please avoid changing stores as the change might not propagate to all children"
+ )
+
+ console.error = baseError
+ })
 })

test/inject.test.js

@@ -127,62 +127,6 @@ describe("inject based context", () => {
  expect(wrapperC.root.children[0].type.displayName).toBe("inject(ComponentC)")
  })
 
- test("overriding stores is supported", () => {
- const C = inject("foo", "bar")(
- observer(
- class C extends Component {
- render() {
- return (
- <div>
- context:
- {this.props.foo}
- {this.props.bar}
- </div>
- )
- }
- }
- )
- )
- const B = () => <C />
- const A = class A extends Component {
- render() {
- return (
- <Provider foo="bar" bar={1337}>
- <div>
- <span>
- <B />
- </span>
- <section>
- <Provider foo={42}>
- <B />
- </Provider>
- </section>
- </div>
- </Provider>
- )
- }
- }
- const wrapper = renderer.create(<A />)
- expect(wrapper).toMatchInlineSnapshot(`
-<div>
- <span>
- <div>
- context:
- bar
- 1337
- </div>
- </span>
- <section>
- <div>
- context:
- 42
- 1337
- </div>
- </section>
-</div>
-`)
- })
-
  // FIXME: see other comments related to error catching in React
  // test does work as expected when running manually
  test("store should be available", () => {
@@ -257,72 +201,6 @@ describe("inject based context", () => {
  renderer.create(<B />)
  })
 
- test("warning is printed when changing stores", () => {
- let msgs = []
- const baseError = console.error
- console.error = m => msgs.push(m.split("\n").slice(0, 7)) // drop stacktraces to avoid line number issues
- const a = mobx.observable.box(3)
- const C = inject("foo")(
- observer(
- class C extends Component {
- render() {
- return (
- <div>
- context:
- {this.props.foo}
- </div>
- )
- }
- }
- )
- )
- const B = observer(
- class B extends Component {
- render() {
- return <C />
- }
- }
- )
- const A = observer(
- class A extends Component {
- render() {
- return (
- <section>
- <span>{a.get()}</span>
- <Provider foo={a.get()}>
- <B />
- </Provider>
- </section>
- )
- }
- }
- )
- const wrapper = renderer.create(<A />)
-
- expect(wrapper).toMatchInlineSnapshot(`
-<section>
- <span>
- 3
- </span>
- <div>
- context:
- 3
- </div>
-</section>
-`)
-
- expect(() => {
- act(() => {
- a.set(42)
- })
- }).toThrow(
- "The set of provided stores has changed. Please avoid changing stores as the change might not propagate to all children"
- )
- expect(msgs).toMatchSnapshot() // nobody caught the error of the rendering
-
- console.error = baseError
- })
-
  test("custom storesToProps", () => {
  const C = inject((stores, props) => {
  expect(stores).toEqual({ foo: "bar" })