Skip to content

Commit eabc9ab

Browse files
author
Kent C. Dodds
committed
update stuff to what I came up with in the config-jest branches
1 parent d0cb901 commit eabc9ab

File tree

12 files changed

+107
-32
lines changed

12 files changed

+107
-32
lines changed

‎.eslintrc.js

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
const path = require('path')
2+
13
module.exports = {
24
extends: [
35
'kentcdodds',
@@ -6,4 +8,16 @@ module.exports = {
68
'kentcdodds/jest',
79
'kentcdodds/react',
810
],
11+
overrides: [
12+
{
13+
files: ['**/__tests__/**'],
14+
settings: {
15+
'import/resolver': {
16+
jest: {
17+
jestConfigFile: path.join(__dirname, './jest.config.js'),
18+
},
19+
},
20+
},
21+
},
22+
],
923
}

‎jest.config.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,11 @@ module.exports = {
1515
lines: 100,
1616
},
1717
},
18+
coveragePathIgnorePatterns: [
19+
'/node_modules/',
20+
'/__tests__/',
21+
'__server_tests__/',
22+
],
1823
projects: [
1924
'./test/jest.lint.js',
2025
'./test/jest.client.js',

‎package.json

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,7 @@
77
"test": "is-ci \"test:coverage\" \"test:watch\"",
88
"test:coverage": "jest --coverage",
99
"test:watch": "jest --watch",
10-
"test:debug": "node --inspect-brk ./node_modules/.bin/jest --runInBand --watch",
11-
"test:debug:win": "node --inspect-brk ./node_modules/jest/bin/jest.js --runInBand --watch",
10+
"test:debug": "node --inspect-brk ./node_modules/jest/bin/jest.js --runInBand --watch",
1211
"cy:run": "cypress run",
1312
"cy:open": "cypress open",
1413
"test:e2e": "is-ci \"test:e2e:run\" \"test:e2e:dev\"",
@@ -36,24 +35,25 @@
3635
"@babel/preset-react": "^7.0.0-beta.51",
3736
"babel-core": "7.0.0-bridge.0",
3837
"babel-loader": "^7.1.4",
39-
"babel-plugin-dynamic-import-node": "^1.2.0",
38+
"babel-plugin-dynamic-import-node": "^2.0.0",
4039
"babel-plugin-emotion": "^9.2.4",
4140
"css-loader": "^0.28.11",
4241
"cypress": "^3.0.1",
4342
"cypress-testing-library": "^2.2.0",
4443
"eslint": "^5.0.1",
4544
"eslint-config-kentcdodds": "^14.0.0",
45+
"eslint-import-resolver-jest": "^2.1.1",
4646
"file-loader": "^1.1.11",
4747
"husky": "^0.14.3",
4848
"identity-obj-proxy": "^3.0.0",
4949
"is-ci-cli": "^1.1.1",
5050
"jest": "^23.1.0",
51-
"jest-dom": "^1.3.1",
5251
"jest-emotion": "^9.2.4",
5352
"jest-runner-eslint": "^0.6.0",
5453
"jest-watch-select-projects": "0.0.1",
5554
"jest-watch-typeahead": "^0.1.0",
5655
"lint-staged": "^7.2.0",
56+
"prettier": "^1.13.7",
5757
"prop-types": "^15.6.2",
5858
"react-testing-library": "^4.0.2",
5959
"serve": "^9.1.0",
@@ -65,6 +65,7 @@
6565
},
6666
"dependencies": {
6767
"emotion": "^9.2.4",
68+
"emotion-theming": "^9.2.4",
6869
"react": "^16.4.1",
6970
"react-dom": "^16.4.1",
7071
"react-emotion": "^9.2.4",

‎src/__tests__/calculator.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react'
2-
import {render} from 'react-testing-library'
2+
import {render} from 'calculator-test-utils'
33
import loadable from 'react-loadable'
44
import Calculator from '../calculator'
55

‎src/app.js

Lines changed: 49 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,55 @@
11
import React from 'react'
2+
import {ThemeProvider} from 'emotion-theming'
23
import Calculator from './calculator'
4+
import * as themes from './themes'
35

4-
function App() {
5-
return (
6-
<React.Fragment>
7-
<Calculator />
8-
<div style={{marginTop: 30, textAlign: 'center'}}>
9-
Calculator component{' '}
10-
<a href="https://codepen.io/mjijackson/pen/xOzyGX">created</a>
11-
{' by '}
12-
<br />
13-
<a href="https://twitter.com/mjackson">Michael Jackson</a> of{' '}
14-
<a href="https://reacttraining.com/">React Training</a>
15-
</div>
16-
</React.Fragment>
17-
)
6+
class App extends React.Component {
7+
state = {theme: 'dark'}
8+
handleThemeChange = ({target: {value}}) => this.setState({theme: value})
9+
render() {
10+
return (
11+
<ThemeProvider theme={themes[this.state.theme]}>
12+
<React.Fragment>
13+
<Calculator />
14+
<div style={{marginTop: 30}}>
15+
<fieldset>
16+
<legend>Theme</legend>
17+
<label>
18+
<input
19+
onChange={this.handleThemeChange}
20+
checked={this.state.theme === 'light'}
21+
type="radio"
22+
name="theme"
23+
value="light"
24+
/>{' '}
25+
light
26+
</label>
27+
<label>
28+
<input
29+
onChange={this.handleThemeChange}
30+
checked={this.state.theme === 'dark'}
31+
type="radio"
32+
name="theme"
33+
value="dark"
34+
/>{' '}
35+
dark
36+
</label>
37+
</fieldset>
38+
</div>
39+
<div style={{marginTop: 30, textAlign: 'center'}}>
40+
Calculator component{' '}
41+
<a href="https://codepen.io/mjijackson/pen/xOzyGX">created</a>
42+
{' by '}
43+
<br />
44+
<a href="https://twitter.com/mjackson">Michael Jackson</a> of{' '}
45+
<a href="https://reacttraining.com/">React Training</a>
46+
</div>
47+
</React.Fragment>
48+
</ThemeProvider>
49+
)
50+
}
1851
}
1952

2053
export default App
54+
55+
/* eslint import/namespace:0 */

‎src/shared/__tests__/auto-scaling-text.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react'
2-
import {render} from 'react-testing-library'
2+
import {render} from 'calculator-test-utils'
33
import AutoScalingText from '../auto-scaling-text'
44

55
test('mounts', () => {

‎src/shared/__tests__/calculator-display.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react'
2-
import {render} from 'react-testing-library'
2+
import {render} from 'calculator-test-utils'
33
import CalculatorDisplay from '../calculator-display'
44

55
test('mounts', () => {

‎src/themes.js

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
export const dark = {
2+
displayTextColor: 'white',
3+
displayBackgroundColor: '#1c191c',
4+
}
5+
6+
export const light = {
7+
displayTextColor: '#1c191c',
8+
displayBackgroundColor: 'white',
9+
}

‎test/calculator-test-utils.js

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import React from 'react'
2+
import {render as rtlRender} from 'react-testing-library'
3+
import {ThemeProvider} from 'emotion-theming'
4+
import * as themes from '../src/themes'
5+
6+
function render(ui, ...rest) {
7+
return rtlRender(
8+
<ThemeProvider theme={themes.dark}>{ui}</ThemeProvider>,
9+
...rest,
10+
)
11+
}
12+
13+
export * from 'react-testing-library'
14+
// override the built-in render with our own
15+
export {render}

‎test/jest-common.js

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -4,19 +4,18 @@ const path = require('path')
44

55
module.exports = {
66
rootDir: path.join(__dirname, '..'),
7-
moduleFileExtensions: ['js', 'json', 'jsx', 'node', 'css'],
8-
moduleDirectories: ['node_modules', path.join(__dirname, 'src'), 'shared'],
7+
moduleDirectories: [
8+
'node_modules',
9+
path.join(__dirname, 'src'),
10+
'shared',
11+
__dirname,
12+
],
913
moduleNameMapper: {
1014
// module must come first
1115
'\\.module\\.css$': 'identity-obj-proxy',
1216
'\\.css$': require.resolve('./style-mock.js'),
1317
// can also map files that are loaded by webpack with the file-loader
1418
},
15-
coveragePathIgnorePatterns: [
16-
'/node_modules/',
17-
'/__tests__/',
18-
'__server_tests__/',
19-
],
2019
watchPlugins: [
2120
'jest-watch-typeahead/filename',
2221
'jest-watch-typeahead/testname',

0 commit comments

Comments
 (0)