Skip to content

Commit 84ea061

Browse files
mpeypertimdorr
mpeyper
authored and
timdorr
committed
Use react-hooks-testing-library to test hooks (#1259)
* Use react-hooks-testing-library to test hooks * Disable react/display-name rule with nested .eslintrc file
1 parent 9f422c3 commit 84ea061

File tree

8 files changed

+99
-169
lines changed

8 files changed

+99
-169
lines changed

‎package-lock.json‎

Lines changed: 21 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -74,6 +74,8 @@
7474
"prettier": "^1.16.4",
7575
"react": "^16.8.6",
7676
"react-dom": "^16.8.6",
77+
"react-hooks-testing-library": "^0.5.0",
78+
"react-test-renderer": "^16.8.6",
7779
"react-testing-library": "^5.9.0",
7880
"redux": "^4.0.1",
7981
"rimraf": "^2.6.3",

‎test/hooks/.eslintrc‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"rules": {
3+
"react/display-name": 0
4+
}
5+
}

‎test/hooks/useActions.spec.js‎

Lines changed: 36 additions & 95 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from 'react'
22
import { createStore } from 'redux'
3-
import * as rtl from 'react-testing-library'
3+
import { renderHook } from 'react-hooks-testing-library'
44
import { Provider as ProviderMock, useActions } from '../../src/index.js'
55

66
describe('React', () => {
@@ -28,58 +28,29 @@ describe('React', () => {
2828
dispatchedActions = []
2929
})
3030

31-
afterEach(() => rtl.cleanup())
32-
3331
it('supports a single action creator', () => {
34-
const Comp = () => {
35-
const inc1 = useActions(() => ({ type: 'inc1' }))
36-
37-
return (
38-
<>
39-
<button id="bInc1" onClick={inc1} />
40-
</>
41-
)
42-
}
43-
44-
const { container } = rtl.render(
45-
<ProviderMock store={store}>
46-
<Comp />
47-
</ProviderMock>
32+
const { result } = renderHook(
33+
() => useActions(() => ({ type: 'inc1' })),
34+
{ wrapper: props => <ProviderMock {...props} store={store} /> }
4835
)
4936

50-
const bInc1 = container.querySelector('#bInc1')
51-
52-
rtl.fireEvent.click(bInc1)
37+
result.current()
5338

5439
expect(dispatchedActions).toEqual([{ type: 'inc1' }])
5540
})
5641

5742
it('supports an object of action creators', () => {
58-
const Comp = () => {
59-
const { inc1, inc2 } = useActions({
60-
inc1: () => ({ type: 'inc1' }),
61-
inc2: () => ({ type: 'inc', amount: 2 })
62-
})
63-
64-
return (
65-
<>
66-
<button id="bInc1" onClick={inc1} />
67-
<button id="bInc2" onClick={inc2} />
68-
</>
69-
)
70-
}
71-
72-
const { container } = rtl.render(
73-
<ProviderMock store={store}>
74-
<Comp />
75-
</ProviderMock>
43+
const { result } = renderHook(
44+
() =>
45+
useActions({
46+
inc1: () => ({ type: 'inc1' }),
47+
inc2: () => ({ type: 'inc', amount: 2 })
48+
}),
49+
{ wrapper: props => <ProviderMock {...props} store={store} /> }
7650
)
7751

78-
const bInc1 = container.querySelector('#bInc1')
79-
const bInc2 = container.querySelector('#bInc2')
80-
81-
rtl.fireEvent.click(bInc1)
82-
rtl.fireEvent.click(bInc2)
52+
result.current.inc1()
53+
result.current.inc2()
8354

8455
expect(dispatchedActions).toEqual([
8556
{ type: 'inc1' },
@@ -88,31 +59,17 @@ describe('React', () => {
8859
})
8960

9061
it('supports an array of action creators', () => {
91-
const Comp = () => {
92-
const [inc1, inc2] = useActions([
93-
() => ({ type: 'inc1' }),
94-
() => ({ type: 'inc', amount: 2 })
95-
])
96-
97-
return (
98-
<>
99-
<button id="bInc1" onClick={inc1} />
100-
<button id="bInc2" onClick={inc2} />
101-
</>
102-
)
103-
}
104-
105-
const { container } = rtl.render(
106-
<ProviderMock store={store}>
107-
<Comp />
108-
</ProviderMock>
62+
const { result } = renderHook(
63+
() =>
64+
useActions([
65+
() => ({ type: 'inc1' }),
66+
() => ({ type: 'inc', amount: 2 })
67+
]),
68+
{ wrapper: props => <ProviderMock {...props} store={store} /> }
10969
)
11070

111-
const bInc1 = container.querySelector('#bInc1')
112-
const bInc2 = container.querySelector('#bInc2')
113-
114-
rtl.fireEvent.click(bInc1)
115-
rtl.fireEvent.click(bInc2)
71+
result.current[0]()
72+
result.current[1]()
11673

11774
expect(dispatchedActions).toEqual([
11875
{ type: 'inc1' },
@@ -133,37 +90,21 @@ describe('React', () => {
13390
const store = createStore(reducer)
13491
dispatchedActions = []
13592

136-
const Comp = () => {
137-
const { adjust } = useActions({
138-
adjust: (amount, isAdd = true) => ({
139-
type: 'adjust',
140-
amount,
141-
isAdd
142-
})
143-
})
144-
145-
return (
146-
<>
147-
<button id="bInc1" onClick={() => adjust(1)} />
148-
<button id="bInc2" onClick={() => adjust(2)} />
149-
<button id="bDec1" onClick={() => adjust(1, false)} />
150-
</>
151-
)
152-
}
153-
154-
const { container } = rtl.render(
155-
<ProviderMock store={store}>
156-
<Comp />
157-
</ProviderMock>
93+
const { result } = renderHook(
94+
() =>
95+
useActions({
96+
adjust: (amount, isAdd = true) => ({
97+
type: 'adjust',
98+
amount,
99+
isAdd
100+
})
101+
}),
102+
{ wrapper: props => <ProviderMock {...props} store={store} /> }
158103
)
159104

160-
const bInc1 = container.querySelector('#bInc1')
161-
const bInc2 = container.querySelector('#bInc2')
162-
const bDec1 = container.querySelector('#bDec1')
163-
164-
rtl.fireEvent.click(bInc1)
165-
rtl.fireEvent.click(bInc2)
166-
rtl.fireEvent.click(bDec1)
105+
result.current.adjust(1)
106+
result.current.adjust(2)
107+
result.current.adjust(1, false)
167108

168109
expect(dispatchedActions).toEqual([
169110
{ type: 'adjust', amount: 1, isAdd: true },

‎test/hooks/useDispatch.spec.js‎

Lines changed: 5 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,19 @@
11
import React from 'react'
22
import { createStore } from 'redux'
3-
import * as rtl from 'react-testing-library'
3+
import { renderHook } from 'react-hooks-testing-library'
44
import { Provider as ProviderMock, useDispatch } from '../../src/index.js'
55

66
const store = createStore(c => c + 1)
77

88
describe('React', () => {
99
describe('hooks', () => {
1010
describe('useDispatch', () => {
11-
afterEach(() => rtl.cleanup())
12-
1311
it("returns the store's dispatch function", () => {
14-
let dispatch
15-
16-
const Comp = () => {
17-
dispatch = useDispatch()
18-
return <div />
19-
}
20-
21-
rtl.render(
22-
<ProviderMock store={store}>
23-
<Comp />
24-
</ProviderMock>
25-
)
12+
const { result } = renderHook(() => useDispatch(), {
13+
wrapper: props => <ProviderMock {...props} store={store} />
14+
})
2615

27-
expect(dispatch).toBe(store.dispatch)
16+
expect(result.current).toBe(store.dispatch)
2817
})
2918
})
3019
})

‎test/hooks/useRedux.spec.js‎

Lines changed: 14 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -2,49 +2,38 @@
22

33
import React from 'react'
44
import { createStore } from 'redux'
5-
import * as rtl from 'react-testing-library'
5+
import { renderHook, act } from 'react-hooks-testing-library'
66
import { Provider as ProviderMock, useRedux } from '../../src/index.js'
77

88
describe('React', () => {
99
describe('hooks', () => {
1010
describe('useRedux', () => {
1111
let store
12-
let renderedItems = []
1312

1413
beforeEach(() => {
1514
store = createStore(({ count } = { count: -1 }) => ({
1615
count: count + 1
1716
}))
18-
renderedItems = []
1917
})
2018

21-
afterEach(() => rtl.cleanup())
22-
2319
it('selects the state and binds action creators', () => {
24-
const Comp = () => {
25-
const [count, { inc }] = useRedux(s => s.count, {
26-
inc: () => ({ type: '' })
27-
})
28-
renderedItems.push(count)
29-
return (
30-
<>
31-
<div>{count}</div>
32-
<button id="bInc" onClick={inc} />
33-
</>
34-
)
35-
}
36-
37-
const { container } = rtl.render(
38-
<ProviderMock store={store}>
39-
<Comp />
40-
</ProviderMock>
20+
const { result } = renderHook(
21+
() =>
22+
useRedux(s => s.count, {
23+
inc: () => ({ type: '' })
24+
}),
25+
{
26+
wrapper: props => <ProviderMock {...props} store={store} />
27+
}
4128
)
4229

43-
const bInc = container.querySelector('#bInc')
30+
expect(result.current[0]).toEqual(0)
4431

45-
rtl.fireEvent.click(bInc)
32+
act(() => {
33+
result.current[1].inc()
34+
})
4635

47-
expect(renderedItems).toEqual([0, 1])
36+
expect(result.current[0]).toEqual(1)
4837
})
4938
})
5039
})

‎test/hooks/useReduxContext.spec.js‎

Lines changed: 3 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,15 @@
1-
import React from 'react'
2-
import * as rtl from 'react-testing-library'
1+
import { renderHook } from 'react-hooks-testing-library'
32
import { useReduxContext } from '../../src/hooks/useReduxContext'
43

54
describe('React', () => {
65
describe('hooks', () => {
76
describe('useReduxContext', () => {
8-
afterEach(() => rtl.cleanup())
9-
107
it('throws if component is not wrapped in provider', () => {
118
const spy = jest.spyOn(console, 'error').mockImplementation(() => {})
129

13-
const Comp = () => {
14-
useReduxContext()
15-
return <div />
16-
}
10+
const { result } = renderHook(() => useReduxContext())
1711

18-
expect(() => rtl.render(<Comp />)).toThrow(
12+
expect(result.error.message).toMatch(
1913
/could not find react-redux context value/
2014
)
2115

0 commit comments

Comments
 (0)