Skip to content
This repository has been archived by the owner on Dec 31, 2020. It is now read-only.

Commit

Permalink
Do not use deprecated lifecycle methods in tests (#757)
Browse files Browse the repository at this point in the history 
* Do not use componentWillUpdate in issue21.test.js

* Do not use componentWillReceiveProps in issue21.test.js

* Do not use componentWillMount in issue21.test.js

* Do not use componentWillMount in observer.test.js
  • Loading branch information
@vkrol @FredyC
vkrol authored and FredyC committed Aug 12, 2019
1 parent 34ab6ef commit c27fc78
Show file tree
Hide file tree
Showing 2 changed files with 32 additions and 117 deletions.
104 changes: 27 additions & 77 deletions test/issue21.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,9 +72,7 @@ const Wizard = observer(

const WizardStep = observer(
class WizardStep extends Component {
componentWillMount() {
this.renderCount = 0
}
renderCount = 0
componentWillUnmount() {
// console.log("Unmounting!")
}
Expand Down Expand Up @@ -145,11 +143,8 @@ test("verify prop changes are picked up", () => {
const events = []
const Child = observer(
class Child extends Component {
componentWillReceiveProps(nextProps) {
events.push(["receive", this.props.item.subid, nextProps.item.subid])
}
componentWillUpdate(nextProps) {
events.push(["update", this.props.item.subid, nextProps.item.subid])
componentDidUpdate(prevProps) {
events.push(["update", prevProps.item.subid, this.props.item.subid])
}
render() {
events.push(["render", this.props.item.subid, this.props.item.text])
Expand Down Expand Up @@ -187,13 +182,7 @@ test("verify prop changes are picked up", () => {
events.splice(0)
container.querySelector("#testDiv").click()
expect(events.sort()).toEqual(
[
["compute", 1],
["receive", 1, 2],
["update", 1, 2],
["compute", 2],
["render", 2, "1.2.test.0"]
].sort()
[["compute", 1], ["update", 1, 2], ["compute", 2], ["render", 2, "1.2.test.0"]].sort()
)
})

Expand Down Expand Up @@ -230,20 +219,16 @@ test("verify props is reactive", () => {

const Child = observer(
class Child extends Component {
componentWillMount() {
events.push(["mount"])
mobx.extendObservable(this, {
get computedLabel() {
events.push(["computed label", this.props.item.subid])
return this.props.item.label
}
})
@mobx.computed
get computedLabel() {
events.push(["computed label", this.props.item.subid])
return this.props.item.label
}
componentWillReceiveProps(nextProps) {
events.push(["receive", this.props.item.subid, nextProps.item.subid])
componentDidMount() {
events.push(["mount"])
}
componentWillUpdate(nextProps) {
events.push(["update", this.props.item.subid, nextProps.item.subid])
componentDidUpdate(prevProps) {
events.push(["update", prevProps.item.subid, this.props.item.subid])
}
render() {
events.push([
Expand Down Expand Up @@ -295,7 +280,6 @@ test("verify props is reactive", () => {
expect(events.sort()).toEqual(
[
["compute", 1],
["receive", 1, 2],
["update", 1, 2],
["compute", 2],
["computed label", 2],
Expand All @@ -322,15 +306,11 @@ test("no re-render for shallow equal props", async () => {

const Child = observer(
class Child extends Component {
componentWillMount() {
componentDidMount() {
events.push(["mount"])
}
componentWillReceiveProps(nextProps) {
events.push(["receive", this.props.item.subid, nextProps.item.subid])
}

componentWillUpdate(nextProps) {
events.push(["update", this.props.item.subid, nextProps.item.subid])
componentDidUpdate(prevProps) {
events.push(["update", prevProps.item.subid, this.props.item.subid])
}
render() {
events.push(["render", this.props.item.subid, this.props.item.label])
Expand Down Expand Up @@ -367,28 +347,14 @@ test("no re-render for shallow equal props", async () => {
expect(events.sort()).toEqual([["parent render", 0], ["mount"], ["render", 1, "hi"]].sort())
events.splice(0)
container.querySelector("#testDiv").click()
expect(events.sort()).toEqual([["parent render", 1], ["receive", 1, 1]].sort())
expect(events.sort()).toEqual([["parent render", 1]].sort())
})

test("lifecycle callbacks called with correct arguments", () => {
var Comp = observer(
class Comp extends Component {
componentWillReceiveProps(nextProps) {
// "componentWillReceiveProps: nextProps.counter === 1"
expect(nextProps.counter).toBe(1)
// "componentWillReceiveProps: this.props.counter === 1"
expect(this.props.counter).toBe(0)
}
componentWillUpdate(nextProps) {
// "componentWillReceiveProps: nextProps.counter === 1"
expect(nextProps.counter).toBe(1)
// "componentWillReceiveProps: this.props.counter === 1"
expect(this.props.counter).toBe(0)
}
componentDidUpdate(prevProps) {
// "componentWillReceiveProps: nextProps.counter === 1"
expect(prevProps.counter).toBe(0)
// "componentWillReceiveProps: this.props.counter === 1"
expect(this.props.counter).toBe(1)
}
render() {
Expand All @@ -414,40 +380,26 @@ test("lifecycle callbacks called with correct arguments", () => {
container.querySelector("#testButton").click()
})

test("verify props are reactive in componentWillMount and constructor", () => {
const prop1Values = []
const prop2Values = []
let componentWillMountCallsCount = 0
test("verify props are reactive in constructor", () => {
const propValues = []
let constructorCallsCount = 0

const Component = observer(
class Component extends React.Component {
constructor(props, context) {
super(props, context)
constructorCallsCount++
this.disposer1 = mobx.reaction(
() => this.props.prop1,
prop => prop1Values.push(prop),
{
fireImmediately: true
}
)
}

componentWillMount() {
componentWillMountCallsCount++
this.disposer2 = mobx.reaction(
() => this.props.prop2,
prop => prop2Values.push(prop),
this.disposer = mobx.reaction(
() => this.props.prop,
prop => propValues.push(prop),
{
fireImmediately: true
}
)
}

componentWillUnmount() {
this.disposer1()
this.disposer2()
this.disposer()
}

render() {
Expand All @@ -456,12 +408,10 @@ test("verify props are reactive in componentWillMount and constructor", () => {
}
)

const { rerender } = render(<Component prop1="1" prop2="4" />)
rerender(<Component prop1="2" prop2="3" />)
rerender(<Component prop1="3" prop2="2" />)
rerender(<Component prop1="4" prop2="1" />)
const { rerender } = render(<Component prop="1" />)
rerender(<Component prop="2" />)
rerender(<Component prop="3" />)
rerender(<Component prop="4" />)
expect(constructorCallsCount).toEqual(1)
expect(componentWillMountCallsCount).toEqual(1)
expect(prop1Values).toEqual(["1", "2", "3", "4"])
expect(prop2Values).toEqual(["4", "3", "2", "1"])
expect(propValues).toEqual(["1", "2", "3", "4"])
})
45 changes: 5 additions & 40 deletions test/observer.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -341,12 +341,9 @@ test("correctly wraps display name of child component", () => {
describe("124 - react to changes in this.props via computed", () => {
const Comp = observer(
class T extends Component {
componentWillMount() {
mobx.extendObservable(this, {
get computedProp() {
return this.props.x
}
})
@mobx.computed
get computedProp() {
return this.props.x
}
render() {
return (
Expand Down Expand Up @@ -695,39 +692,6 @@ test("parent / childs render in the right order", () => {
expect(events).toEqual(["parent", "child", "parent"])
})

test("195 - async componentWillMount does not work", () => {
jest.useFakeTimers()

const renderedValues = []

@observer
class WillMount extends React.Component {
@mobx.observable
counter = 0

@mobx.action
inc = () => this.counter++

componentWillMount() {
setTimeout(() => this.inc(), 300)
}

render() {
renderedValues.push(this.counter)
return (
<p>
{this.counter}
<button onClick={this.inc}>+</button>
</p>
)
}
}
render(<WillMount />)

jest.runAllTimers()
expect(renderedValues).toEqual([0, 1])
})

describe("use Observer inject and render sugar should work ", () => {
test("use render without inject should be correct", () => {
const Comp = () => (
Expand Down Expand Up @@ -854,7 +818,8 @@ test("#692 - componentDidUpdate is triggered", () => {
@mobx.action
inc = () => this.counter++

componentWillMount() {
constructor() {
super()
setTimeout(() => this.inc(), 300)
}

Expand Down

0 comments on commit c27fc78

Please sign in to comment.