Skip to content

Commit

Permalink
Use Jest for testing
Browse files Browse the repository at this point in the history
This commit uses Jest for testing everything instead of our homegrown
combination of karma + mocha + expect. We were already using Jest to
test react-router-redux and react-router-native, so this commit makes
everything more consistent.
  • Loading branch information
mjackson committed Jul 14, 2017
1 parent 3964114 commit 172dc16
Show file tree
Hide file tree
Showing 28 changed files with 93 additions and 468 deletions.
2 changes: 0 additions & 2 deletions packages/react-router-config/.gitignore
Expand Up @@ -2,6 +2,4 @@ es
node_modules
umd
/*.js
!karma.conf.js
!tests.webpack.js
!webpack.config.js
113 changes: 0 additions & 113 deletions packages/react-router-config/karma.conf.js

This file was deleted.

@@ -1,5 +1,4 @@
import matchRoutes from '../matchRoutes'
import expect from 'expect'

it('finds matched routes', () => {
const routes = [
Expand Down
Expand Up @@ -26,7 +26,7 @@ describe('renderRoutes', () => {
</StaticRouter>
)
expect(rendered.length).toEqual(1)
expect(rendered[0]).toMatch(routeToMatch)
expect(rendered[0]).toEqual(routeToMatch)
})

describe('Switch usage', () => {
Expand All @@ -45,7 +45,7 @@ describe('renderRoutes', () => {
</StaticRouter>
)
expect(rendered.length).toEqual(1)
expect(rendered[0]).toMatch(routeToMatch)
expect(rendered[0]).toEqual(routeToMatch)
})

it('renders the first matched route in nested routes', () => {
Expand All @@ -70,8 +70,8 @@ describe('renderRoutes', () => {
</StaticRouter>
)
expect(rendered.length).toEqual(2)
expect(rendered[0]).toMatch(routeToMatch)
expect(rendered[1]).toMatch(childRouteToMatch)
expect(rendered[0]).toEqual(routeToMatch)
expect(rendered[1]).toEqual(childRouteToMatch)
})
})

Expand Down
12 changes: 2 additions & 10 deletions packages/react-router-config/package.json
Expand Up @@ -22,7 +22,7 @@
"prepublishOnly": "node ./tools/build.js",
"clean": "git clean -fdX .",
"lint": "eslint modules",
"test": "karma start --single-run"
"test": "jest"
},
"peerDependencies": {
"react": "^15",
Expand All @@ -40,16 +40,8 @@
"eslint": "^2.13.1",
"eslint-plugin-import": "^1.15.0",
"eslint-plugin-react": "^5.2.2",
"expect": "^1.20.1",
"gzip-size": "^3.0.0",
"karma": "^0.13.22",
"karma-browserstack-launcher": "^1.0.1",
"karma-chrome-launcher": "^1.0.1",
"karma-mocha": "^1.0.1",
"karma-mocha-reporter": "^2.0.4",
"karma-sourcemap-loader": "^0.3.7",
"karma-webpack": "^1.7.0",
"mocha": "^2.5.3",

This comment has been minimized.

Copy link
@ryanflorence

ryanflorence Jul 15, 2017

Member

we all love small modules, but we also all love getting rid of a bajillion deps! Nice work!

"jest": "^20.0.4",
"pretty-bytes": "^3.0.1",
"react": "^15.4.2",
"react-addons-test-utils": "^15.4.2",
Expand Down
2 changes: 0 additions & 2 deletions packages/react-router-config/tests.webpack.js

This file was deleted.

2 changes: 0 additions & 2 deletions packages/react-router-dom/.gitignore
Expand Up @@ -2,6 +2,4 @@ es
node_modules
umd
/*.js
!karma.conf.js
!tests.webpack.js
!webpack.config.js
113 changes: 0 additions & 113 deletions packages/react-router-dom/karma.conf.js

This file was deleted.

@@ -1,4 +1,3 @@
import expect from 'expect'
import React from 'react'
import ReactDOM from 'react-dom'
import PropTypes from 'prop-types'
Expand All @@ -24,21 +23,22 @@ describe('A <BrowserRouter>', () => {
</BrowserRouter>
), node)

expect(history).toBeAn('object')
expect(typeof history).toBe('object')

This comment has been minimized.

Copy link
@stryju

stryju Jul 15, 2017

or

expect(history).toBe(expect.any(Object));

source


or if you want to be more specific:

expect(history).toBe(expect.objectContaining({
  length: expect.any(Number),
  location: expect.any(Object),
  ...
}));

This comment has been minimized.

Copy link
@bahmutov

bahmutov Jul 15, 2017

or you can try schema-shot that only looks at and saves types of properties

schemaShot(history)

https://github.com/bahmutov/schema-shot

This comment has been minimized.

Copy link
@mattiaerre

mattiaerre Jul 15, 2017

Since it is serialisable I would just use .toMatchSnapshot() 😅

})

it('warns when passed a history prop', () => {
const history = {}
const node = document.createElement('div')
expect.spyOn(console, 'error')

spyOn(console, 'error')

ReactDOM.render((
<BrowserRouter history={history} />
), node)

expect(console.error.calls.length).toBe(1)
expect(console.error.calls[0].arguments[0]).toMatch(
/<BrowserRouter.*import \{ Router }/)
expect.restoreSpies()
expect(console.error.calls.count()).toBe(1)

This comment has been minimized.

Copy link
@stryju

stryju Jul 15, 2017

or

expect(console.error).toHaveBeenCalledTimes(1);

source

expect(console.error.calls.argsFor(0)[0]).toContain(

This comment has been minimized.

Copy link
@stryju

stryju Jul 15, 2017

or

expect(console.error).toHaveBeenCalledWith(
  expect.stringContaining('<BrowserRouter> ignores the history prop'),
);

source

'<BrowserRouter> ignores the history prop'
)
})
})
14 changes: 7 additions & 7 deletions packages/react-router-dom/modules/__tests__/HashRouter-test.js
@@ -1,4 +1,3 @@
import expect from 'expect'
import React from 'react'
import ReactDOM from 'react-dom'
import PropTypes from 'prop-types'
Expand All @@ -24,21 +23,22 @@ describe('A <HashRouter>', () => {
</HashRouter>
), node)

expect(history).toBeAn('object')
expect(typeof history).toBe('object')
})

it('warns when passed a history prop', () => {
const history = {}
const node = document.createElement('div')
expect.spyOn(console, 'error')

spyOn(console, 'error')

ReactDOM.render((
<HashRouter history={history} />
), node)

expect(console.error.calls.length).toBe(1)
expect(console.error.calls[0].arguments[0]).toMatch(
/<HashRouter.*import \{ Router }/)
expect.restoreSpies()
expect(console.error.calls.count()).toBe(1)
expect(console.error.calls.argsFor(0)[0]).toContain(
'<HashRouter> ignores the history prop'
)
})
})
1 change: 0 additions & 1 deletion packages/react-router-dom/modules/__tests__/Link-test.js
@@ -1,4 +1,3 @@
import expect from 'expect'
import React from 'react'
import ReactDOM from 'react-dom'
import MemoryRouter from 'react-router/MemoryRouter'
Expand Down

2 comments on commit 172dc16

@ryanflorence
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Strong work @mjackson, this is awesome.

@mjackson
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks! 😅

Please sign in to comment.