Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix: ensure babel-preset-gatsby can be used with unit tests #9629

Merged
merged 12 commits into from
Nov 5, 2018
Merged

fix: ensure babel-preset-gatsby can be used with unit tests #9629

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
09693a2
fix: ensure babel-preset-gatsby can be used with unit tests
DSchau Nov 1, 2018
9f1e8bb
chore: fix pr feedback
DSchau Nov 1, 2018
0964728
chore: tweak grammar
DSchau Nov 1, 2018
60d01ab
docs(examples): add a using-jest example app
DSchau Nov 1, 2018
3229473
chore: remove console log
DSchau Nov 1, 2018
4dd45c7
chore: update unit testing docs
DSchau Nov 5, 2018
3975917
chore: update language
DSchau Nov 5, 2018
8097d77
Update docs/docs/unit-testing.md
pieh Nov 5, 2018
d631309
refactor: rely less on implementation details; use getByText
DSchau Nov 5, 2018
3662873
chore: remove test-id
DSchau Nov 5, 2018
31b1eab
Merge branch 'babel-preset-gatsby/modules-fix' of github.com:DSchau/g…
DSchau Nov 5, 2018
bad29ee
chore: add test suffix and update tests
DSchau Nov 5, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
104 changes: 45 additions & 59 deletions docs/docs/unit-testing.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,31 +27,26 @@ npm install --save-dev jest babel-jest react-test-renderer identity-obj-proxy 'b

Because Gatsby handles its own Babel configuration, you will need to manually
tell Jest to use `babel-jest`. The easiest way to do this is to add a `"jest"`
section in your `package.json`. You can set up some useful defaults at the same
section in your `jest.config.js`. You can set up some useful defaults at the same
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Note: I made a few opinionated changes here, namely package.json -> jest.config.js

kakadiadarpan marked this conversation as resolved.
Show resolved Hide resolved
time:

```json:title=package.json
"jest": {
"transform": {
"^.+\\.jsx?$": "<rootDir>/jest-preprocess.js"
},
"testRegex": "/.*(__tests__\\/.*)|(.*(test|spec))\\.jsx?$",
"moduleNameMapper": {
".+\\.(css|styl|less|sass|scss)$": "identity-obj-proxy",
".+\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js"
},
"testPathIgnorePatterns": ["node_modules", ".cache"],
"transformIgnorePatterns": [
"node_modules/(?!(gatsby)/)"
],
"globals": {
"__PATH_PREFIX__": ""
},
"testURL": "http://localhost",
"setupFiles": [
"<rootDir>/loadershim.js"
]
}
```json:title=jest.config.js
module.exports = {
"transform": {
"^.+\\.jsx?$": "<rootDir>/jest-preprocess.js"
},
"moduleNameMapper": {
".+\\.(css|styl|less|sass|scss)$": "identity-obj-proxy",
".+\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js"
},
"testPathIgnorePatterns": ["node_modules", ".cache"],
"transformIgnorePatterns": ["node_modules/(?!(gatsby)/)"],
"globals": {
"__PATH_PREFIX__": ""
},
"testURL": "http://localhost",
"setupFiles": ["<rootDir>/loadershim.js"]
}
```

The `transform` section tells Jest that all `js` or `jsx` files need to be
Expand Down Expand Up @@ -150,11 +145,12 @@ import React from "react"
import renderer from "react-test-renderer"
import Bio from "./Bio"

describe("Bio", () =>
describe("Bio", () => {
Copy link
Contributor Author

Choose a reason for hiding this comment

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

I think this is quite a bit clearer/real-world, even though both were valid

it("renders correctly", () => {
const tree = renderer.create(<Bio />).toJSON()
expect(tree).toMatchSnapshot()
}))
})
})
```

This is a very simple snapshot test, which uses `react-test-renderer` to render
Expand Down Expand Up @@ -220,39 +216,28 @@ config. First install `ts-jest`:
npm install --save-dev ts-jest
```

Then edit the Jest config in your `package.json` to match this:

```json:title=package.json
"jest": {
"transform": {
"^.+\\.tsx?$": "ts-jest",
"^.+\\.jsx?$": "<rootDir>/jest-preprocess.js"
},
"testRegex": "(/__tests__/.*\\.([tj]sx?)|(\\.|/)(test|spec))\\.([tj]sx?)$",
"moduleNameMapper": {
".+\\.(css|styl|less|sass|scss)$": "identity-obj-proxy",
".+\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js"
},
"moduleFileExtensions": [
"ts",
"tsx",
"js",
"jsx",
"json",
"node"
],
"testPathIgnorePatterns": ["node_modules", ".cache"],
"transformIgnorePatterns": [
"node_modules/(?!(gatsby)/)"
],
"globals": {
"__PATH_PREFIX__": ""
},
"testURL": "http://localhost",
"setupFiles": [
"<rootDir>/loadershim.js"
]
}
Then edit the Jest config in your `jest.config.js` to match this:

```json:title=jest.config.js
module.exports = {
"transform": {
"^.+\\.tsx?$": "ts-jest",
"^.+\\.jsx?$": "<rootDir>/jest-preprocess.js"
},
"testRegex": "(/__tests__/.*\\.([tj]sx?)|(\\.|/)(test|spec))\\.([tj]sx?)$",
"moduleNameMapper": {
".+\\.(css|styl|less|sass|scss)$": "identity-obj-proxy",
".+\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js"
},
"moduleFileExtensions": ["ts", "tsx", "js", "jsx", "json", "node"],
"testPathIgnorePatterns": ["node_modules", ".cache"],
"transformIgnorePatterns": ["node_modules/(?!(gatsby)/)"],
"globals": {
"__PATH_PREFIX__": ""
},
"testURL": "http://localhost",
"setupFiles": ["<rootDir>/loadershim.js"]
}
```

## Testing components with Router
Expand Down Expand Up @@ -295,7 +280,7 @@ import React from "react"
import renderer from "react-test-renderer"
import BlogIndex from "../pages/index"

describe("BlogIndex", () =>
describe("BlogIndex", () => {
it("renders correctly", () => {
const location = {
pathname: "/",
Expand All @@ -304,6 +289,7 @@ describe("BlogIndex", () =>
const tree = renderer.create(<BlogIndex location={location} />).toJSON()
expect(tree).toMatchSnapshot()
}))
})
```

For more information on testing page components, be sure to read the docs on
Expand Down
4 changes: 2 additions & 2 deletions packages/babel-preset-gatsby/src/__tests__/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,10 +9,10 @@ it(`Specifies proper presets and plugins for test stage`, () => {
expect.stringContaining(path.join(`@babel`, `preset-env`)),
{
loose: true,
modules: false,
modules: `commonjs`,
useBuiltIns: `usage`,
targets: {
browsers: undefined,
node: `current`,
},
},
],
Expand Down
4 changes: 2 additions & 2 deletions packages/babel-preset-gatsby/src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ function preset(context, options = {}) {
const stage = process.env.GATSBY_BUILD_STAGE || `test`

if (!targets) {
if (stage === `build-html`) {
if (stage === `build-html` || stage === `test`) {
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Think this makes sense, right? Should transpile to whatever the current version of node is in the unit test runner.

targets = {
node: `current`,
}
Expand All @@ -37,7 +37,7 @@ function preset(context, options = {}) {
r(`@babel/preset-env`),
{
loose: true,
modules: false,
modules: stage === `test` ? `commonjs` : false,
useBuiltIns: `usage`,
targets,
},
Expand Down