Mock console.warn in tests and verify warnings are called in the righ…

…t place (mobxjs#3352)

* Mock console.warn in tests and verify warnings are called in the right place

* Add afterEach to correctly restore console.warn mock. Remove test for useObserver

* Fix accidentally removed code

* Fix accidentally removed code

* Rename test

* Make branch up-to-date with master

* Remove outdated snapshots

* Don't change not related files

* Don't change not related files

* Don't change not related files

* Turn off git hooks locally to avoid touching not related files

* Do not touch unrelated files

* Mock only once

packages/mobx-react-lite/__tests__/__snapshots__/observer.test.tsx.snap

@@ -63,3 +63,53 @@ exports[`issue 12 run transaction 2`] = `
  </div>
 </div>
 `;
+
+exports[`issue 309 isObserverBatched is still defined and yields true by default 1`] = `
+[MockFunction] {
+ "calls": Array [
+ Array [
+ "[MobX] Deprecated",
+ ],
+ ],
+ "results": Array [
+ Object {
+ "type": "return",
+ "value": undefined,
+ },
+ ],
+}
+`;
+
+exports[`issue 309 isObserverBatched is still defined and yields true by default 2`] = `
+[MockFunction] {
+ "calls": Array [
+ Array [
+ "[MobX] Deprecated",
+ ],
+ ],
+ "results": Array [
+ Object {
+ "type": "return",
+ "value": undefined,
+ },
+ ],
+}
+`;
+
+exports[`observer(cmp, { forwardRef: true }) + useImperativeHandle 1`] = `
+[MockFunction] {
+ "calls": Array [
+ Array [
+ "[mobx-react-lite] \`observer(fn, { forwardRef: true })\` is deprecated, use \`observer(React.forwardRef(fn))\`",
+ ],
+ ],
+ "results": Array [
+ Object {
+ "type": "return",
+ "value": undefined,
+ },
+ ],
+}
+`;
+
+exports[`useImperativeHandle and forwardRef should work with useObserver 1`] = `[MockFunction]`;

packages/mobx-react-lite/__tests__/__snapshots__/useAsObservableSource.deprecated.test.tsx.snap

@@ -0,0 +1,24 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`base useAsObservableSource should work with <Observer> 1`] = `
+[MockFunction] {
+ "calls": Array [
+ Array [
+ "[mobx-react-lite] 'useAsObservableSource' is deprecated, please store the values directly in an observable, for example by using 'useLocalObservable', and sync future updates using 'useEffect' when needed. See the README for examples.",
+ ],
+ Array [
+ "[mobx-react-lite] 'useLocalStore' is deprecated, use 'useLocalObservable' instead.",
+ ],
+ ],
+ "results": Array [
+ Object {
+ "type": "return",
+ "value": undefined,
+ },
+ Object {
+ "type": "return",
+ "value": undefined,
+ },
+ ],
+}
+`;

packages/mobx-react-lite/__tests__/__snapshots__/useLocalStore.deprecated.test.tsx.snap

@@ -0,0 +1,33 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`base useLocalStore should work 1`] = `
+[MockFunction] {
+ "calls": Array [
+ Array [
+ "[mobx-react-lite] 'useLocalStore' is deprecated, use 'useLocalObservable' instead.",
+ ],
+ ],
+ "results": Array [
+ Object {
+ "type": "return",
+ "value": undefined,
+ },
+ ],
+}
+`;
+
+exports[`is used to keep observable within component body with props and useObserver 1`] = `
+[MockFunction] {
+ "calls": Array [
+ Array [
+ "[mobx-react-lite] 'useAsObservableSource' is deprecated, please store the values directly in an observable, for example by using 'useLocalObservable', and sync future updates using 'useEffect' when needed. See the README for examples.",
+ ],
+ ],
+ "results": Array [
+ Object {
+ "type": "return",
+ "value": undefined,
+ },
+ ],
+}
+`;

packages/mobx-react-lite/__tests__/enforceActions.test.tsx

@@ -0,0 +1,74 @@
+import * as mobx from "mobx"
+import { _resetGlobalState } from "mobx"
+import * as React from "react"
+import { useEffect } from "react"
+import { observer, useLocalObservable } from "mobx-react"
+import { render } from "@testing-library/react"
+
+let consoleWarnMock: jest.SpyInstance | undefined
+afterEach(() => {
+ consoleWarnMock?.mockRestore()
+})
+
+afterEach(() => {
+ _resetGlobalState()
+})
+
+describe("enforcing actions", () => {
+ it("'never' should work", () => {
+ consoleWarnMock = jest.spyOn(console, "warn").mockImplementation(() => {})
+ mobx.configure({ enforceActions: "never" })
+
+ const Parent = observer(() => {
+ const obs = useLocalObservable(() => ({
+ x: 1
+ }))
+ useEffect(() => {
+ obs.x++
+ }, [])
+
+ return <div>{obs.x}</div>
+ })
+
+ render(<Parent />)
+ expect(consoleWarnMock).not.toBeCalled()
+ })
+
+ it("'observed' should work", () => {
+ consoleWarnMock = jest.spyOn(console, "warn").mockImplementation(() => {})
+ mobx.configure({ enforceActions: "observed" })
+
+ const Parent = observer(() => {
+ const obs = useLocalObservable(() => ({
+ x: 1
+ }))
+ useEffect(() => {
+ obs.x++
+ }, [])
+
+ return <div>{obs.x}</div>
+ })
+
+ render(<Parent />)
+ expect(consoleWarnMock).toBeCalledTimes(1)
+ })
+
+ it("'always' should work", () => {
+ consoleWarnMock = jest.spyOn(console, "warn").mockImplementation(() => {})
+ mobx.configure({ enforceActions: "always" })
+
+ const Parent = observer(() => {
+ const obs = useLocalObservable(() => ({
+ x: 1
+ }))
+ useEffect(() => {
+ obs.x++
+ }, [])
+
+ return <div>{obs.x}</div>
+ })
+
+ render(<Parent />)
+ expect(consoleWarnMock).toBeCalledTimes(1)
+ })
+})

packages/mobx-react-lite/__tests__/observer.test.tsx

@@ -9,6 +9,11 @@ const getDNode = (obj: any, prop?: string) => mobx.getObserverTree(obj, prop)
 
 afterEach(cleanup)
 
+let consoleWarnMock: jest.SpyInstance | undefined
+afterEach(() => {
+ consoleWarnMock?.mockRestore()
+})
+
 function runTestSuite(mode: "observer" | "useObserver") {
  function obsComponent<P extends object>(
  component: React.FunctionComponent<P>,
@@ -18,6 +23,7 @@ function runTestSuite(mode: "observer" | "useObserver") {
  return observer(component)
  } else {
  const c = (props: P) => {
+ consoleWarnMock = jest.spyOn(console, "warn").mockImplementation(() => {})
  return useObserver(() => {
  return component(props)
  })
@@ -270,7 +276,9 @@ function runTestSuite(mode: "observer" | "useObserver") {
 
  describe("issue 309", () => {
  test("isObserverBatched is still defined and yields true by default", () => {
+ consoleWarnMock = jest.spyOn(console, "warn").mockImplementation(() => {})
  expect(isObserverBatched()).toBe(true)
+ expect(consoleWarnMock).toMatchSnapshot()
  })
  })
 
@@ -482,6 +490,8 @@ runTestSuite("observer")
 runTestSuite("useObserver")
 
 test("observer(cmp, { forwardRef: true }) + useImperativeHandle", () => {
+ consoleWarnMock = jest.spyOn(console, "warn").mockImplementation(() => {})
+
  interface IMethods {
  focus(): void
  }
@@ -513,6 +523,7 @@ test("observer(cmp, { forwardRef: true }) + useImperativeHandle", () => {
  expect(cr).toBeTruthy()
  expect(cr.current).toBeTruthy()
  expect(typeof cr.current!.focus).toBe("function")
+ expect(consoleWarnMock).toMatchSnapshot()
 })
 
 test("observer(forwardRef(cmp)) + useImperativeHandle", () => {
@@ -548,6 +559,7 @@ test("observer(forwardRef(cmp)) + useImperativeHandle", () => {
 })
 
 test("useImperativeHandle and forwardRef should work with useObserver", () => {
+ consoleWarnMock = jest.spyOn(console, "warn").mockImplementation(() => {})
  interface IMethods {
  focus(): void
  }
@@ -579,6 +591,7 @@ test("useImperativeHandle and forwardRef should work with useObserver", () => {
  expect(cr).toBeTruthy()
  expect(cr.current).toBeTruthy()
  expect(typeof cr.current!.focus).toBe("function")
+ expect(consoleWarnMock).toMatchSnapshot()
 })
 
 it("should hoist known statics only", () => {
@@ -913,7 +926,6 @@ it("dependencies should not become temporarily unobserved", async () => {
 
  // @ts-ignore
  React.useEffect.mockImplementation(effect => {
- console.warn("delaying useEffect call")
  p.push(
  new Promise<void>(resolve => {
  setTimeout(() => {

packages/mobx-react-lite/__tests__/useAsObservableSource.deprecated.test.tsx

@@ -10,8 +10,14 @@ import { resetMobx } from "./utils"
 afterEach(cleanup)
 afterEach(resetMobx)
 
+let consoleWarnMock: jest.SpyInstance | undefined
+afterEach(() => {
+ consoleWarnMock?.mockRestore()
+})
+
 describe("base useAsObservableSource should work", () => {
  it("with <Observer>", () => {
+ consoleWarnMock = jest.spyOn(console, "warn").mockImplementation(() => {})
  let counterRender = 0
  let observerRender = 0
 
@@ -76,6 +82,7 @@ describe("base useAsObservableSource should work", () => {
  expect(container.querySelector("span")!.innerHTML).toBe("22")
  expect(counterRender).toBe(2)
  expect(observerRender).toBe(3)
+ expect(consoleWarnMock).toMatchSnapshot()
  })
 
  it("with observer()", () => {

packages/mobx-react-lite/__tests__/useLocalStore.test.tsx → packages/mobx-react-lite/__tests__/useLocalObservable.test.tsx

@@ -10,7 +10,10 @@ import { useObserver } from "../src/useObserver"
 
 afterEach(cleanup)
 
-afterEach(cleanup)
+let consoleWarnMock: jest.SpyInstance | undefined
+afterEach(() => {
+ consoleWarnMock?.mockRestore()
+})
 
 test("base useLocalStore should work", () => {
  let counterRender = 0
@@ -435,6 +438,8 @@ describe("is used to keep observable within component body", () => {
 describe("enforcing actions", () => {
  it("'never' should work", () => {
  mobx.configure({ enforceActions: "never" })
+ consoleWarnMock = jest.spyOn(console, "warn").mockImplementation(() => {})
+
  const { result } = renderHook(() => {
  const [multiplier, setMultiplier] = React.useState(2)
  const store = useLocalObservable(() => ({
@@ -452,10 +457,14 @@ describe("enforcing actions", () => {
  }, [multiplier])
  useEffect(() => setMultiplier(3), [])
  })
+
  expect(result.error).not.toBeDefined()
+ 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(() => ({
@@ -473,10 +482,14 @@ describe("enforcing actions", () => {
  }, [multiplier])
  useEffect(() => setMultiplier(3), [])
  })
+
  expect(result.error).not.toBeDefined()
+ 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(() => ({
@@ -494,6 +507,8 @@ describe("enforcing actions", () => {
  }, [multiplier])
  useEffect(() => setMultiplier(3), [])
  })
+
  expect(result.error).not.toBeDefined()
+ expect(consoleWarnMock).toBeCalledTimes(2)
  })
 })