From f9763b603abd14dbac30abd6f8e8b3a794da1d3e Mon Sep 17 00:00:00 2001 From: Veniamin Krol <153412+vkrol@users.noreply.github.com> Date: Wed, 28 Aug 2019 01:07:48 +0300 Subject: [PATCH] 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 | 1 - test/__snapshots__/observer.test.js.snap | 28 ++++++----- test/__snapshots__/stateless.test.js.snap | 28 ++++++----- test/misc.test.js | 33 +++++-------- test/observer.test.js | 58 ++++++++--------------- test/stateless.test.js | 11 ++--- yarn.lock | 12 +---- 7 files changed, 70 insertions(+), 101 deletions(-) diff --git a/package.json b/package.json index 0402673b..a85b1950 100644 --- a/package.json +++ b/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", diff --git a/test/__snapshots__/observer.test.js.snap b/test/__snapshots__/observer.test.js.snap index 56cf46eb..af4107f6 100644 --- a/test/__snapshots__/observer.test.js.snap +++ b/test/__snapshots__/observer.test.js.snap @@ -2,23 +2,27 @@ exports[`issue 12 1`] = `
- - coffee - ! - - - tea - - +
+ + coffee + ! + + + tea + + +
`; exports[`issue 12 2`] = `
- - soup - - +
+ + soup + + +
`; diff --git a/test/__snapshots__/stateless.test.js.snap b/test/__snapshots__/stateless.test.js.snap index 191b828a..77eca06a 100644 --- a/test/__snapshots__/stateless.test.js.snap +++ b/test/__snapshots__/stateless.test.js.snap @@ -2,22 +2,26 @@ exports[`stateless component with forwardRef is reactive 1`] = `
- result: - hello world - , - got ref - , a.x: - 2 +
+ result: + hello world + , + got ref + , a.x: + 2 +
`; exports[`stateless component with forwardRef render test correct 1`] = `
- result: - hello world - , - got ref - , a.x: - 1 +
+ result: + hello world + , + got ref + , a.x: + 1 +
`; diff --git a/test/misc.test.js b/test/misc.test.js index 81de5585..69eba739 100644 --- a/test/misc.test.js +++ b/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() - expect(wrapper.toJSON()).toMatchInlineSnapshot(` + const { container } = render() + expect(container).toMatchInlineSnapshot(`
- - - Hello my name is test - +
+ + + Hello my name is test + +
`) }) @@ -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() - 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( diff --git a/test/observer.test.js b/test/observer.test.js index 38e98c5c..ff90b056 100644 --- a/test/observer.test.js +++ b/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() - expect(wrapper.toJSON()).toMatchSnapshot() + const { container } = render(
) + 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() - expect(wrapper.root.type.name).toEqual("ObserverClass") - - const wrapper2 = TestRenderer.create() - 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() - - const contents = () => wrapper.toTree().rendered.rendered.rendered.join("") + const { container } = render() - 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() - - const contents = () => wrapper.toTree().rendered.rendered.rendered.join("") + const { container } = render() 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 }) - const wrapper = TestRenderer.create() - - const contents = () => wrapper.toTree().rendered.rendered.rendered.join("") + const { container } = render() 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() - expect(wrapper.toJSON()).toMatchInlineSnapshot(` -
- 0 -
-`) + const { container } = render() + expect(container).toHaveTextContent(0) jest.runAllTimers() - expect(wrapper.toJSON()).toMatchInlineSnapshot(` -
- 2 -
-`) + expect(container).toHaveTextContent(2) expect(seen).toEqual(["parent", 0, "parent", 2]) }) diff --git a/test/stateless.test.js b/test/stateless.test.js index e2d549ad..b14e88ed 100644 --- a/test/stateless.test.js +++ b/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 }) =>
result: {testProp}
@@ -95,19 +94,19 @@ describe("stateless component with forwardRef", () => { ) test("render test correct", () => { - const component = TestRenderer.create( + const { container } = render( ) - expect(component).toMatchSnapshot() + expect(container).toMatchSnapshot() }) test("is reactive", () => { - const component = TestRenderer.create( + const { container } = render( ) act(() => { a.x++ }) - expect(component).toMatchSnapshot() + expect(container).toMatchSnapshot() }) }) diff --git a/yarn.lock b/yarn.lock index 77f3d320..275b96e8 100644 --- a/yarn.lock +++ b/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" - react@16.8.6: version "16.8.6" resolved "https://registry.yarnpkg.com/react/-/react-16.8.6.tgz#ad6c3a9614fd3a4e9ef51117f54d888da01f2bbe"