Skip to content

Commit 20fcf76

Browse files
mjacksonmjackson
committed
Use Jest for testing
1 parent d44a7b5 commit 20fcf76

File tree

7 files changed

+865
-1133
lines changed

7 files changed

+865
-1133
lines changed

‎.gitignore

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,4 @@ es
22
node_modules
33
umd
44
/*.js
5-
!karma.conf.js
6-
!tests.webpack.js
75
!webpack.config.js

‎karma.conf.js

Lines changed: 0 additions & 113 deletions
This file was deleted.

‎modules/__tests__/.eslintrc

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
11
{
2+
"plugins": [
3+
"jest"
4+
],
25
"env": {
3-
"mocha": true
6+
"jest/globals": true
47
}
58
}

‎modules/__tests__/Media-test.js

Lines changed: 44 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,43 @@
1-
import expect from 'expect'
21
import React from 'react'
3-
import { render } from 'react-dom'
4-
import { renderToStaticMarkup } from 'react-dom/server'
2+
import ReactDOM from 'react-dom'
3+
import ReactDOMServer from 'react-dom/server'
54
import Media from '../Media'
65

6+
const createMockMediaMatcher = (matches) => () => ({
7+
matches,
8+
addListener: () => {},
9+
removeListener: () => {}
10+
})
11+
712
describe('A <Media>', () => {
13+
let originalMatchMedia
14+
beforeEach(() => {
15+
originalMatchMedia = window.matchMedia
16+
})
17+
18+
afterEach(() => {
19+
window.matchMedia = originalMatchMedia
20+
})
21+
822
let node
923
beforeEach(() => {
1024
node = document.createElement('div')
1125
})
1226

1327
describe('with a query that matches', () => {
14-
const query = `(max-width: ${window.innerWidth}px)`
28+
beforeEach(() => {
29+
window.matchMedia = createMockMediaMatcher(true)
30+
})
1531

1632
describe('and a children element', () => {
1733
it('renders its child', () => {
1834
const element = (
19-
<Media query={query}>
35+
<Media query="">
2036
<div>hello</div>
2137
</Media>
2238
)
2339

24-
render(element, node, () => {
40+
ReactDOM.render(element, node, () => {
2541
expect(node.firstChild.innerHTML).toMatch(/hello/)
2642
})
2743
})
@@ -30,14 +46,14 @@ describe('A <Media>', () => {
3046
describe('and a children function', () => {
3147
it('renders its child', () => {
3248
const element = (
33-
<Media query={query}>
49+
<Media query="">
3450
{matches => (
3551
matches ? <div>hello</div> : <div>goodbye</div>
3652
)}
3753
</Media>
3854
)
3955

40-
render(element, node, () => {
56+
ReactDOM.render(element, node, () => {
4157
expect(node.firstChild.innerHTML).toMatch(/hello/)
4258
})
4359
})
@@ -46,116 +62,79 @@ describe('A <Media>', () => {
4662
describe('and a render function', () => {
4763
it('renders its child', () => {
4864
const element = (
49-
<Media query={query} render={() => (
65+
<Media query="" render={() => (
5066
<div>hello</div>
5167
)}/>
5268
)
5369

54-
render(element, node, () => {
70+
ReactDOM.render(element, node, () => {
5571
expect(node.firstChild.innerHTML).toMatch(/hello/)
5672
})
5773
})
5874
})
59-
60-
describe('and an object query', () => {
61-
it('renders its child', () => {
62-
const query = { maxWidth: window.innerWidth }
63-
const element = (
64-
<Media query={query} render={() => (
65-
<div>hello</div>
66-
)}/>
67-
)
68-
69-
render(element, node, () => {
70-
expect(node.firstChild.innerHTML).toMatch(/hello/)
71-
})
72-
})
73-
})
74-
7575
})
7676

7777
describe('with a query that does not match', () => {
78-
const query = `(min-width: ${window.innerWidth + 1}px)`
78+
beforeEach(() => {
79+
window.matchMedia = createMockMediaMatcher(false)
80+
})
7981

8082
describe('and a children element', () => {
8183
it('renders its child', () => {
8284
const element = (
83-
<Media query={query}>
85+
<Media query="">
8486
<div>hello</div>
8587
</Media>
8688
)
8789

88-
render(element, node, () => {
89-
expect(node.firstChild.innerHTML).toNotMatch(/hello/)
90+
ReactDOM.render(element, node, () => {
91+
expect(node.firstChild.innerHTML || '').not.toMatch(/hello/)
9092
})
9193
})
9294
})
9395

9496
describe('and a children function', () => {
9597
it('renders its child', () => {
9698
const element = (
97-
<Media query={query}>
99+
<Media query="">
98100
{matches => (
99101
matches ? <div>hello</div> : <div>goodbye</div>
100102
)}
101103
</Media>
102104
)
103105

104-
render(element, node, () => {
106+
ReactDOM.render(element, node, () => {
105107
expect(node.firstChild.innerHTML).toMatch(/goodbye/)
106108
})
107109
})
108110
})
109111

110112
describe('and a render function', () => {
111113
it('does not render', () => {
112-
const element = (
113-
<Media query={query} render={() => (
114-
<div>hello</div>
115-
)}/>
116-
)
117-
118-
render(element, node, () => {
119-
expect(node.firstChild.innerHTML).toNotMatch(/hello/)
120-
})
121-
})
122-
123-
it('does not call the render function', () => {
124114
let renderWasCalled = false
125115
const element = (
126-
<Media query={query} render={() => {
116+
<Media query="" render={() => {
127117
renderWasCalled = true
128-
return <div/>
118+
return <div>hello</div>
129119
}}/>
130120
)
131121

132-
render(element, node, () => {
122+
ReactDOM.render(element, node, () => {
123+
expect(node.firstChild.innerHTML || '').not.toMatch(/hello/)
133124
expect(renderWasCalled).toBe(false)
134125
})
135126
})
136127
})
137-
138-
describe('and an object query', () => {
139-
it('does not render its child', () => {
140-
const query = { minWidth: window.innerWidth + 1 }
141-
const element = (
142-
<Media query={query} render={() => (
143-
<div>hello</div>
144-
)}/>
145-
)
146-
147-
render(element, node, () => {
148-
expect(node.firstChild.innerHTML).toNotMatch(/hello/)
149-
})
150-
})
151-
})
152-
153128
})
154129

155130
describe('rendered on the server', () => {
131+
beforeEach(() => {
132+
window.matchMedia = createMockMediaMatcher(true)
133+
})
134+
156135
it('renders its child', () => {
157-
const markup = renderToStaticMarkup(
158-
<Media query="(min-width: 200px)">
136+
const markup = ReactDOMServer.renderToStaticMarkup(
137+
<Media query="">
159138
<div>hello</div>
160139
</Media>
161140
)

‎package.json

Lines changed: 3 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717
"prepublish": "node ./tools/build.js",
1818
"release": "node ./tools/release.js",
1919
"lint": "eslint modules",
20-
"test": "karma start --single-run"
20+
"test": "jest"
2121
},
2222
"peerDependencies": {
2323
"react": ">=15 || ^0.14.7"
@@ -36,18 +36,11 @@
3636
"babel-preset-stage-1": "^6.5.0",
3737
"eslint": "^3.2.2",
3838
"eslint-plugin-import": "^2.0.0",
39+
"eslint-plugin-jest": "^20.0.3",
3940
"eslint-plugin-react": "^6.0.0",
40-
"expect": "^1.20.2",
4141
"gzip-size": "^3.0.0",
4242
"in-publish": "^2.0.0",
43-
"karma": "^1.2.0",
44-
"karma-browserstack-launcher": "^1.0.1",
45-
"karma-chrome-launcher": "^1.0.1",
46-
"karma-mocha": "^1.1.1",
47-
"karma-mocha-reporter": "^2.1.0",
48-
"karma-sourcemap-loader": "^0.3.7",
49-
"karma-webpack": "^2.0.1",
50-
"mocha": "^3.0.0",
43+
"jest": "^20.0.4",
5144
"pretty-bytes": "^4.0.2",
5245
"react": "^15.4.1 || ^0.14.7",
5346
"react-dom": "^15.3.0 || ^0.14.7",

‎tests.webpack.js

Lines changed: 0 additions & 2 deletions
This file was deleted.

0 commit comments

Comments
 (0)