diff --git a/test/Provider.test.js b/test/Provider.test.js index 4de20bd9..b9d2baa1 100644 --- a/test/Provider.test.js +++ b/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 ( + + {({ foo }) => foo} + + ) + } + + const { container } = render() + expect(container).toHaveTextContent("bar") + }) + it("should not provide the children prop", () => { function A() { return ( @@ -22,4 +35,55 @@ describe("Provider", () => { const { container } = render() expect(container).toHaveTextContent("children was not provided") }) + + it("supports overriding stores", () => { + function B() { + return ( + + {({ overridable, nonOverridable }) => `${overridable} ${nonOverridable}`} + + ) + } + + function A() { + return ( + + + + + + + ) + } + const { container } = render() + expect(container).toMatchInlineSnapshot(` +
+ original original + overriden original +
+`) + }) + + it("should throw an error when changing stores", () => { + const baseError = console.error + console.error = () => {} + + function A({ foo }) { + return ( + + {({ foo }) => foo} + + ) + } + + const { rerender } = render(
) + + expect(() => { + rerender() + }).toThrow( + "The set of provided stores has changed. Please avoid changing stores as the change might not propagate to all children" + ) + + console.error = baseError + }) }) diff --git a/test/__snapshots__/inject.test.js.snap b/test/__snapshots__/inject.test.js.snap deleted file mode 100644 index 37099253..00000000 --- a/test/__snapshots__/inject.test.js.snap +++ /dev/null @@ -1,15 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`inject based context warning is printed when changing stores 2`] = ` -Array [ - Array [ - "The above error occurred in the component:", - " in MobXProvider (created by A)", - " in section (created by A)", - " in A", - "", - "Consider adding an error boundary to your tree to customize error handling behavior.", - "Visit https://fb.me/react-error-boundaries to learn more about error boundaries.", - ], -] -`; diff --git a/test/inject.test.js b/test/inject.test.js index 0c715586..29be27e4 100644 --- a/test/inject.test.js +++ b/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 ( -
- context: - {this.props.foo} - {this.props.bar} -
- ) - } - } - ) - ) - const B = () => - const A = class A extends Component { - render() { - return ( - -
- - - -
- - - -
-
-
- ) - } - } - const wrapper = renderer.create(
) - expect(wrapper).toMatchInlineSnapshot(` -
- -
- context: - bar - 1337 -
-
-
-
- context: - 42 - 1337 -
-
-
-`) - }) - // 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() }) - 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 ( -
- context: - {this.props.foo} -
- ) - } - } - ) - ) - const B = observer( - class B extends Component { - render() { - return - } - } - ) - const A = observer( - class A extends Component { - render() { - return ( -
- {a.get()} - - - -
- ) - } - } - ) - const wrapper = renderer.create(
) - - expect(wrapper).toMatchInlineSnapshot(` -
- - 3 - -
- context: - 3 -
-
-`) - - 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" })