fix(recipes): Update tests and fix babel config, tweak readme

packages/gatsby-recipes/package.json

@@ -81,6 +81,13 @@
   "resolutions": {
     "graphql": "^14.6.0"
   },
+  "jest": {
+    "testPathIgnorePatterns": [
+      "/.cache/",
+      "dist"
+    ],
+    "testEnvironment": "node"
+  },
   "scripts": {
     "build": "babel src --out-dir dist --ignore \"**/__tests__\"  --extensions \".ts,.js,.tsx\"",
     "build:watch": "npm run build -- --watch",

packages/gatsby-recipes/recipes/cypress.mdx

@@ -5,7 +5,7 @@ First, we'll want to install Cypress and additional dependencies.
 ---
 
 <NPMPackage name="cypress" dependencyType="devDependency" />
-<NPMPackage name="gatsby-cypress" dependencyType="devDepdendency" />
+<NPMPackage name="gatsby-cypress" dependencyType="devDependency" />
 <NPMPackage name="start-server-and-test" dependencyType="devDependency" />
 
 ---

packages/gatsby-recipes/src/README.md

@@ -81,7 +81,7 @@ Here's how you would write the `gatsby recipes emotion` recipe you just ran:
 
 Install necessary NPM packages
 
-<!-- // refer to the API in this doc to see what APIs are available, like `NPMPackage` -->
+<!-- refer to the API in this doc to see what APIs are available, like `NPMPackage` -->
 
 <NPMPackage name="gatsby-plugin-emotion" />
 <NPMPackage name="@emotion/core" />
@@ -145,7 +145,7 @@ Soon will support options.
 - **theme** the name of the theme (or plugin) which provides the file you'd like to shadow
 - **path** the path to the file within the theme. E.g. the example file above lives at `node_modules/gatsby-theme-blog/src/components/seo.js`
 
-#### `<NPMPackage`
+#### `<NPMPackage>`
 
 `<NPMPackage name="lodash" version="latest" />`
 
@@ -166,7 +166,7 @@ Soon will support options.
 
 #### `<File>`
 
-<File path="test.md" content="https://raw.githubusercontent.com/KyleAMathews/test-recipes/master/gatsby-receipe-sass.mdx" />
+<File path="test.md" content="https://raw.githubusercontent.com/KyleAMathews/test-recipes/master/gatsby-recipe-jest.mdx" />
 
 ##### props
 

packages/gatsby-recipes/src/providers/gatsby/plugin.js

@@ -77,6 +77,7 @@ const addPluginToConfig = (src, pluginName) => {
 
   const { code } = babel.transform(src, {
     plugins: [addPlugins.plugin],
+    configFile: false,
   })
 
   return code
@@ -87,6 +88,7 @@ const getPluginsFromConfig = src => {
 
   babel.transform(src, {
     plugins: [getPlugins.plugin],
+    configFile: false,
   })
 
   return getPlugins.state
@@ -130,6 +132,7 @@ const destroy = async ({ root }, { name }) => {
 
   const { code } = babel.transform(configSrc, {
     plugins: [addPlugins.plugin],
+    configFile: false,
   })
 
   await fs.writeFile(configPath, code)

packages/gatsby-recipes/src/providers/npm/__snapshots__/script.test.js.snap

@@ -45,8 +45,7 @@ Object {
   "diff": "- Original  - 1
 + Modified  + 1
 
-@@ -4,6 +4,6 @@
-    },
+  Object {
     \\"name\\": \\"test\\",
     \\"scripts\\": Object {
 -     \\"apple\\": \\"foot\\",

packages/gatsby-recipes/src/todo.md

@@ -55,11 +55,13 @@ John
 - [x] print pretty error when there's parsing errors of mdx files
 - [x] Move mdx recipes to its own package `gatsby-recipes` & pull them from unpkg
 - [x] add CODEOWNERS file for recipes
-- [ ] give proper npm permissions to `gatsby-recipes`
+- [x] give proper npm permissions to `gatsby-recipes`
 - [x] validate that the first step of recipes don't have any resources. They should just be for the title/description
 - [x] handle not finding a recipe
 - [x] test modifying gatsby-config.js from default starter
-- [ ] getting tests passing
+- [x] get tests passing
+- [ ] add emotion screenshot and add to readme
+- [x] make note about using gists for paths and using the "raw" link
 
 ## Near-ish future