Use react-testing-library instead of react-test-renderer part 2 (#768)

* Use react-testing-library instead of react-test-renderer in observer.test.js

* Use react-testing-library instead of react-test-renderer in stateless.test.js

* Use react-testing-library instead of react-test-renderer in misc.test.js

* Remove react-test-renderer

package.json

@@ -72,7 +72,6 @@
     "prop-types": "^15.6.0",
     "react": "^16.9.0",
     "react-dom": "^16.9.0",
-    "react-test-renderer": "^16.9.0",
     "replace": "^1.1.0",
     "request": "^2.83.0",
     "shelljs": "^0.8.3",

test/__snapshots__/observer.test.js.snap

@@ -2,23 +2,27 @@
 
 exports[`issue 12 1`] = `
 <div>
-  <span>
-    coffee
-    !
-  </span>
-  <span>
-    tea
-    
-  </span>
+  <div>
+    <span>
+      coffee
+      !
+    </span>
+    <span>
+      tea
+      
+    </span>
+  </div>
 </div>
 `;
 
 exports[`issue 12 2`] = `
 <div>
-  <span>
-    soup
-    
-  </span>
+  <div>
+    <span>
+      soup
+      
+    </span>
+  </div>
 </div>
 `;
 

test/__snapshots__/stateless.test.js.snap

@@ -2,22 +2,26 @@
 
 exports[`stateless component with forwardRef is reactive 1`] = `
 <div>
-  result: 
-  hello world
-  , 
-  got ref
-  , a.x: 
-  2
+  <div>
+    result: 
+    hello world
+    , 
+    got ref
+    , a.x: 
+    2
+  </div>
 </div>
 `;
 
 exports[`stateless component with forwardRef render test correct 1`] = `
 <div>
-  result: 
-  hello world
-  , 
-  got ref
-  , a.x: 
-  1
+  <div>
+    result: 
+    hello world
+    , 
+    got ref
+    , a.x: 
+    1
+  </div>
 </div>
 `;

test/misc.test.js

@@ -1,7 +1,6 @@
 import React from "react"
-import { extendObservable, isObservable, observable } from "mobx"
+import { extendObservable, observable } from "mobx"
 import { observer } from "../src"
-import TestRenderer from "react-test-renderer"
 import { render } from "@testing-library/react"
 import withConsole from "./utils/withConsole"
 
@@ -33,17 +32,18 @@ test("issue mobx 405", () => {
     )
 
     const exampleState = new ExampleState()
-    const wrapper = TestRenderer.create(<ExampleView exampleState={exampleState} />)
-    expect(wrapper.toJSON()).toMatchInlineSnapshot(`
+    const { container } = render(<ExampleView exampleState={exampleState} />)
+    expect(container).toMatchInlineSnapshot(`
 <div>
-  <input
-    onChange={[Function]}
-    type="text"
-    value="test"
-  />
-  <span>
-    Hello my name is test
-  </span>
+  <div>
+    <input
+      type="text"
+      value="test"
+    />
+    <span>
+      Hello my name is test
+    </span>
+  </div>
 </div>
 `)
 })
@@ -86,15 +86,6 @@ test("#85 Should handle state changing in constructors", () => {
     expect(container).toHaveTextContent("child:7 - parent:7")
 })
 
-test("testIsComponentReactive", () => {
-    const C = observer(() => null)
-    const wrapper = TestRenderer.create(<C />)
-    const instance = wrapper.getInstance()
-
-    // instance is something different then the rendering reaction!
-    expect(isObservable(instance)).toBeFalsy()
-})
-
 test("Do not warn about custom shouldComponentUpdate when it is the one provided by ReactiveMixin", () => {
     withConsole(() => {
         const A = observer(

test/observer.test.js

@@ -1,7 +1,6 @@
 import React from "react"
 import { inject, observer, Observer, useStaticRendering } from "../src"
-import TestRenderer, { act } from "react-test-renderer"
-import { render } from "@testing-library/react"
+import { render, act } from "@testing-library/react"
 import {
     _getAdministration,
     _resetGlobalState,
@@ -262,8 +261,8 @@ test("issue 12", () => {
         )
     })
 
-    const wrapper = TestRenderer.create(<Table />)
-    expect(wrapper.toJSON()).toMatchSnapshot()
+    const { container } = render(<Table />)
+    expect(container).toMatchSnapshot()
 
     act(() => {
         transaction(() => {
@@ -272,7 +271,7 @@ test("issue 12", () => {
             data.selected = "tea"
         })
     })
-    expect(wrapper.toJSON()).toMatchSnapshot()
+    expect(container).toMatchSnapshot()
     expect(events).toEqual(["table", "row: coffee", "row: tea", "table", "row: soup"])
 })
 
@@ -338,11 +337,8 @@ test("correctly wraps display name of child component", () => {
         return null
     })
 
-    const wrapper = TestRenderer.create(<A />)
-    expect(wrapper.root.type.name).toEqual("ObserverClass")
-
-    const wrapper2 = TestRenderer.create(<B />)
-    expect(wrapper2.root.type.displayName).toEqual("StatelessObserver")
+    expect(A.name).toEqual("ObserverClass")
+    expect(B.displayName).toEqual("StatelessObserver")
 })
 
 describe("124 - react to changes in this.props via computed", () => {
@@ -527,15 +523,13 @@ test("it rerenders correctly if some props are non-observables - 1", () => {
         })
     }
 
-    const wrapper = TestRenderer.create(<Parent odata={odata} data={data} />)
-
-    const contents = () => wrapper.toTree().rendered.rendered.rendered.join("")
+    const { container } = render(<Parent odata={odata} data={data} />)
 
-    expect(contents()).toEqual("1-1-1")
+    expect(container).toHaveTextContent("1-1-1")
     stuff()
-    expect(contents()).toEqual("2-2-2")
+    expect(container).toHaveTextContent("2-2-2")
     stuff()
-    expect(contents()).toEqual("3-3-3")
+    expect(container).toHaveTextContent("3-3-3")
 })
 
 test("it rerenders correctly if some props are non-observables - 2", () => {
@@ -568,20 +562,18 @@ test("it rerenders correctly if some props are non-observables - 2", () => {
         odata.x++
     }
 
-    const wrapper = TestRenderer.create(<Parent odata={odata} />)
-
-    const contents = () => wrapper.toTree().rendered.rendered.rendered.join("")
+    const { container } = render(<Parent odata={odata} />)
 
     expect(renderCount).toBe(1)
-    expect(contents()).toBe("1-1")
+    expect(container).toHaveTextContent("1-1")
 
     act(() => stuff())
     expect(renderCount).toBe(2)
-    expect(contents()).toBe("2-2")
+    expect(container).toHaveTextContent("2-2")
 
     act(() => stuff())
     expect(renderCount).toBe(3)
-    expect(contents()).toBe("3-3")
+    expect(container).toHaveTextContent("3-3")
 })
 
 describe("Observer regions should react", () => {
@@ -630,20 +622,18 @@ test("Observer should not re-render on shallow equal new props", () => {
         return <Child data={data} />
     })
 
-    const wrapper = TestRenderer.create(<Parent />)
-
-    const contents = () => wrapper.toTree().rendered.rendered.rendered.join("")
+    const { container } = render(<Parent />)
 
     expect(parentRendering).toBe(1)
     expect(childRendering).toBe(1)
-    expect(contents()).toBe("1")
+    expect(container).toHaveTextContent("1")
 
     act(() => {
         odata.y++
     })
     expect(parentRendering).toBe(2)
     expect(childRendering).toBe(1)
-    expect(contents()).toBe("1")
+    expect(container).toHaveTextContent("1")
 })
 
 test("parent / childs render in the right order", () => {
@@ -795,19 +785,11 @@ test("computed properties react to props", () => {
         }
     }
 
-    const wrapper = TestRenderer.create(<Parent />)
-    expect(wrapper.toJSON()).toMatchInlineSnapshot(`
-<div>
-  0
-</div>
-`)
+    const { container } = render(<Parent />)
+    expect(container).toHaveTextContent(0)
 
     jest.runAllTimers()
-    expect(wrapper.toJSON()).toMatchInlineSnapshot(`
-<div>
-  2
-</div>
-`)
+    expect(container).toHaveTextContent(2)
 
     expect(seen).toEqual(["parent", 0, "parent", 2])
 })

test/stateless.test.js

@@ -1,8 +1,7 @@
 import React from "react"
 import PropTypes from "prop-types"
 import { observer, PropTypes as MRPropTypes } from "../src"
-import { render } from "@testing-library/react"
-import TestRenderer, { act } from "react-test-renderer"
+import { render, act } from "@testing-library/react"
 import { observable } from "mobx"
 
 const StatelessComp = ({ testProp }) => <div>result: {testProp}</div>
@@ -95,19 +94,19 @@ describe("stateless component with forwardRef", () => {
     )
 
     test("render test correct", () => {
-        const component = TestRenderer.create(
+        const { container } = render(
             <ForwardRefCompObserver testProp="hello world" ref={React.createRef()} />
         )
-        expect(component).toMatchSnapshot()
+        expect(container).toMatchSnapshot()
     })
 
     test("is reactive", () => {
-        const component = TestRenderer.create(
+        const { container } = render(
             <ForwardRefCompObserver testProp="hello world" ref={React.createRef()} />
         )
         act(() => {
             a.x++
         })
-        expect(component).toMatchSnapshot()
+        expect(container).toMatchSnapshot()
     })
 })

yarn.lock

@@ -8115,21 +8115,11 @@ react-dom@^16.9.0:
     prop-types "^15.6.2"
     scheduler "^0.15.0"
 
-react-is@^16.8.1, react-is@^16.8.4, react-is@^16.9.0:
+react-is@^16.8.1, react-is@^16.8.4:
   version "16.9.0"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.9.0.tgz#21ca9561399aad0ff1a7701c01683e8ca981edcb"
   integrity sha512-tJBzzzIgnnRfEm046qRcURvwQnZVXmuCbscxUO5RWrGTXpon2d4c8mI0D8WE6ydVIm29JiLB6+RslkIvym9Rjw==
 
-react-test-renderer@^16.9.0:
-  version "16.9.0"
-  resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-16.9.0.tgz#7ed657a374af47af88f66f33a3ef99c9610c8ae9"
-  integrity sha512-R62stB73qZyhrJo7wmCW9jgl/07ai+YzvouvCXIJLBkRlRqLx4j9RqcLEAfNfU3OxTGucqR2Whmn3/Aad6L3hQ==
-  dependencies:
-    object-assign "^4.1.1"
-    prop-types "^15.6.2"
-    react-is "^16.9.0"
-    scheduler "^0.15.0"
-
 [email protected]:
   version "16.8.6"
   resolved "https://registry.yarnpkg.com/react/-/react-16.8.6.tgz#ad6c3a9614fd3a4e9ef51117f54d888da01f2bbe"