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

DSchau · 2018-11-01T14:49:59Z

This PR does a few things, namely:

Fixes a few things with the test stage, e.g. uses commonjs modules for
test running, uses the current node version for @babel/preset-env, etc.
Fixes up docs slightly for the unit testing guide
Fixes "SyntaxError: Unexpected string" when implementing unit testing guide on stock blog starter #9614

This PR does a few things, namely: - Fixes a few things with the test stage, e.g. uses commonjs modules for test running, uses the current node version for @babel/preset-env, etc. - Fixes up docs slightly for the unit testing guide - Fixes gatsbyjs#9614

DSchau

Left a few comments!

DSchau · 2018-11-01T14:54:21Z

docs/docs/unit-testing.md

@@ -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


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

DSchau · 2018-11-01T14:54:44Z

docs/docs/unit-testing.md

@@ -150,11 +145,12 @@ import React from "react"
 import renderer from "react-test-renderer"
 import Bio from "./Bio"

-describe("Bio", () =>
+describe("Bio", () => {


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

DSchau · 2018-11-01T14:55:22Z

packages/babel-preset-gatsby/src/index.js

@@ -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`) {


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

docs/docs/unit-testing.md

Addressed the feedback :)

DSchau · 2018-11-01T20:38:57Z

Also @kentcdodds if you're feeling spicy 🌶, want to take a look at examples/using-jest and make sure it looks good to your eyes? I used react-testing-library for the bulk of the unit testing functionality, so just want to make sure it largely looks solid!

For context, the examples/ directory is just supposed to show real-world illustrations of some concept, e.g. using typescript, an instagram-like app built with Gatsby, and of course, using jest! All the tests are in src/**/__tests__

No worries if not, though :)

DSchau · 2018-11-01T20:39:39Z

examples/using-jest/__mocks__/gatsby.js

+module.exports = {
+  ...gatsby,
+  graphql: jest.fn(),
+  Link: jest.fn().mockImplementation(({ to, ...rest }) =>


This is kinda janky, but I also think that this should probably be added to the docs/unit-testing.md document!

(also just for clarity here, gatsby-link errors out in Jest, so this is a way to side step that issue)

shannonbux

Looks great, just made one note!

shannonbux · 2018-11-02T01:20:43Z

examples/using-jest/README.md

+
+Kick off your next Gatsby app with some great testing practices enabled via [Jest][jest], [react-testing-library][react-testing-library], and of course, [Gatsby][gatsby] 💪
+
+Check out the [unit testing doc][unit-testing-doc] for further info!


will this link work? Looks...incomplete to me

oh and it's mentioned below too, with the complete link

Yeah! These are markdown style links, so it's like a table of links that it refers to below. Actually a good practice to get into, I think :) Keeps links in one place so they're easy to edit/re-use!

Just as an example if it's helpful!

This is a link to [google][google], and [this link][google] will also refer to the google link! 🎉 [google]: https://google.com

ohhhhhh kewl

that seems handy. I'll keep that in mind!

DSchau · 2018-11-05T15:31:29Z

@pieh I think we should take a look at this today. Wanna give it a review? 👀

pieh

LGTM, just one link need to be adjusted to work on gatsbyjs.org

docs/docs/unit-testing.md

Co-Authored-By: DSchau <DSchau@users.noreply.github.com>

kentcdodds

If ya'll want my opinion, I think the example tests have far too many querySelector and querySelectorAll (which are testing implementation details), and too many getByTestId (which are suboptimal). Any chance these could be changed to the better getByText, getByLabelText, getByAltText, etc queries?

DSchau · 2018-11-05T18:41:55Z

@kentcdodds hey sure, thanks for chiming in! I'll update--I appreciate the feedback!

…atsby into babel-preset-gatsby/modules-fix

This (simple) PR fixes a bug I was noticing in gatsbyjs#9629, specifically that __tests__/*.js files _were_ being included in the bundle. This is because the isTestFile function in gatsby-plugin-page-creator is passed the file name, not the file name _with_ the folder (__tests__ in this case). I added a second check to check the dir, but could also just implement this check with the raw file path, as well

DSchau · 2018-11-05T20:48:10Z

Successfully published:
 - babel-preset-gatsby@0.1.3

…ctually ignored (#9720) * fix: ensure that __tests__ directory is actually ignored This (simple) PR fixes a bug I was noticing in #9629, specifically that __tests__/*.js files _were_ being included in the bundle. This is because the isTestFile function in gatsby-plugin-page-creator is passed the file name, not the file name _with_ the folder (__tests__ in this case). I added a second check to check the dir, but could also just implement this check with the raw file path, as well * chore: use back ticks * fix: account for nested directories and switch to micromatch * chore: split to test windows path matching * chore: run linter * chore: add windows path matching test (micromatch supports natively) * fix: pass single string to isMatch, instead of array * Revert "fix: pass single string to isMatch, instead of array" This reverts commit dbc2ffe.

* 'master' of github.com:gatsbyjs/gatsby: (63 commits) Update how-to-contribute.md to mention the style guide when writing blogs/tutorials (gatsbyjs#9742) Added Tylermcginnis website (gatsbyjs#9619) Fix grammar and punctuation (gatsbyjs#9498) Fix typo of plugin authoring (gatsbyjs#9737) Authentication tutorial - small fixes (gatsbyjs#9738) chore: move run-sift (gatsbyjs#9549) docs: fix minor typo (gatsbyjs#9730) chore(release): Publish fix(gatsby-plugin-page-creator): ensure that __tests__ directory is actually ignored (gatsbyjs#9720) fix: revert admin redirect (gatsbyjs#9728) fix: adjust page order to make nested matchPaths work (gatsbyjs#9719) feat(gatsby-plugin-sharp): cache base64 if possible (gatsbyjs#9059) chore(release): Publish fix(gatsby-plugin-offline): Serve the offline shell for short URLs + use no-cors for external resources (gatsbyjs#9679) chore(release): Publish fix: ensure babel-preset-gatsby can be used with unit tests (gatsbyjs#9629) feat(www): Filter posts by date (gatsbyjs#9400) fix(blog): azure blog post url date (gatsbyjs#9718) feat(blog): Add post on publishing to Azure (gatsbyjs#8868) Emphasize importance of promise return on source-plugin docs (gatsbyjs#9650) ...

…#9629) This PR does a few things, namely: - Fixes a few things with the test stage, e.g. uses commonjs modules for test running, uses the current node version for @babel/preset-env, etc. - Fixes up docs slightly for the unit testing guide - Fixes gatsbyjs#9614

…ctually ignored (gatsbyjs#9720) * fix: ensure that __tests__ directory is actually ignored This (simple) PR fixes a bug I was noticing in gatsbyjs#9629, specifically that __tests__/*.js files _were_ being included in the bundle. This is because the isTestFile function in gatsby-plugin-page-creator is passed the file name, not the file name _with_ the folder (__tests__ in this case). I added a second check to check the dir, but could also just implement this check with the raw file path, as well * chore: use back ticks * fix: account for nested directories and switch to micromatch * chore: split to test windows path matching * chore: run linter * chore: add windows path matching test (micromatch supports natively) * fix: pass single string to isMatch, instead of array * Revert "fix: pass single string to isMatch, instead of array" This reverts commit dbc2ffe.

DSchau requested a review from a team November 1, 2018 14:50

DSchau commented Nov 1, 2018

View reviewed changes

kakadiadarpan previously requested changes Nov 1, 2018

View reviewed changes

docs/docs/unit-testing.md Outdated Show resolved Hide resolved

DSchau added 2 commits November 1, 2018 09:57

chore: fix pr feedback

9f1e8bb

chore: tweak grammar

0964728

docs(examples): add a using-jest example app

60d01ab

chore: remove console log

3229473

DSchau commented Nov 1, 2018

View reviewed changes

shannonbux reviewed Nov 2, 2018

View reviewed changes

kakadiadarpan mentioned this pull request Nov 5, 2018

[babel-preset-gatsby] extend options for @babel/preset-env #9674

Closed

DSchau added 2 commits November 5, 2018 11:09

chore: update unit testing docs

4dd45c7

chore: update language

3975917

pieh approved these changes Nov 5, 2018

View reviewed changes

docs/docs/unit-testing.md Outdated Show resolved Hide resolved

Update docs/docs/unit-testing.md

8097d77

Co-Authored-By: DSchau <DSchau@users.noreply.github.com>

kentcdodds reviewed Nov 5, 2018

View reviewed changes

DSchau added 4 commits November 5, 2018 12:50

refactor: rely less on implementation details; use getByText

d631309

chore: remove test-id

3662873

Merge branch 'babel-preset-gatsby/modules-fix' of github.com:DSchau/g…

31b1eab

…atsby into babel-preset-gatsby/modules-fix

chore: add test suffix and update tests

bad29ee

pieh merged commit 401df07 into gatsbyjs:master Nov 5, 2018

DSchau mentioned this pull request Nov 5, 2018

fix(gatsby-plugin-page-creator): ensure that __tests__ directory is actually ignored #9720

Merged

DSchau deleted the babel-preset-gatsby/modules-fix branch November 5, 2018 20:03

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

DSchau commented Nov 1, 2018

DSchau left a comment

DSchau Nov 1, 2018

DSchau Nov 1, 2018

DSchau Nov 1, 2018

DSchau commented Nov 1, 2018 •

edited

DSchau Nov 1, 2018

DSchau Nov 1, 2018

shannonbux left a comment

shannonbux Nov 2, 2018

shannonbux Nov 2, 2018

DSchau Nov 2, 2018

DSchau Nov 2, 2018

shannonbux Nov 2, 2018

shannonbux Nov 2, 2018

DSchau commented Nov 5, 2018

pieh left a comment

kentcdodds left a comment

DSchau commented Nov 5, 2018

DSchau commented Nov 5, 2018


		Kick off your next Gatsby app with some great testing practices enabled via [Jest][jest], [react-testing-library][react-testing-library], and of course, [Gatsby][gatsby] 💪

		Check out the [unit testing doc][unit-testing-doc] for further info!

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

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

Conversation

DSchau commented Nov 1, 2018

DSchau left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

DSchau commented Nov 1, 2018 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

shannonbux left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

DSchau commented Nov 5, 2018

pieh left a comment

Choose a reason for hiding this comment

kentcdodds left a comment

Choose a reason for hiding this comment

DSchau commented Nov 5, 2018

DSchau commented Nov 5, 2018

DSchau commented Nov 1, 2018 •

edited