{"id":1296,"date":"2020-11-11T03:53:01","date_gmt":"2020-11-11T03:53:01","guid":{"rendered":"http:\/\/10.0.0.14\/?p=1296"},"modified":"2021-09-07T23:21:42","modified_gmt":"2021-09-07T23:21:42","slug":"tdd-with-gatsby-django-docker-part-2-chapter-10-setup-gatsby-for-tdd","status":"publish","type":"post","link":"https:\/\/tutorials.leesonresearch.com\/tutorials\/2020\/11\/11\/tdd-with-gatsby-django-docker-part-2-chapter-10-setup-gatsby-for-tdd\/","title":{"rendered":"TDD with Gatsby, Django & Docker Part 2, Chapter 10 — Setup Gatsby for TDD ~"},"content":{"rendered":"\n

Setting Up Gatsby for Unit Testing<\/h1>\n\n\n\n

We are going to be using the Jest testing framework for react which was developed by Facebook. So first, we install all the Jest dependencies that play well with Gatsby.<\/p>\n\n\n\n

I’m not going to go into detail of how all these configuration files function since the Gatsby Unit Testing Config documentation <\/a>already walks through all the files in detail.<\/p>\n\n\n\n

Install Dependencies<\/h4>\n\n\n
\n# power down the app and cd into frontend on your local computer\nnpm install --save-dev jest@26.6.3 babel-jest@26.6.3 react-test-renderer babel-preset-gatsby identity-obj-proxy\n<\/pre><\/div>\n\n\n
At the time of this writing babel-jest version 27.0.0 breaks with gatsby. As a work-around we installed babel-jest version 26.6.3 along with jest version 26.6.3.<\/p>\n\n\n\n
We need to create five configuration files for Jest:<\/p>\n\n\n\n
  1. jest.config.js<\/li>
  2. jest-preprocess.js<\/li>
  3. __mocks__\/file-mock.js<\/li>
  4. loadershim.js<\/li>
  5. __mocks__\/gatsby.js<\/li><\/ol>\n\n\n\n
    Create Config File for Jest<\/h4>\n\n\n
    \n\/\/ frontend\/jest.config.js\n\nmodule.exports = {\n  transform: {\n    "^.+\\\\.jsx?$": `&lt;rootDir>\/jest-preprocess.js`,\n  },\n  moduleNameMapper: {\n    ".+\\\\.(css|styl|less|sass|scss)$": `identity-obj-proxy`,\n    ".+\\\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": `&lt;rootDir>\/__mocks__\/file-mock.js`,\n  },\n  testPathIgnorePatterns: [`node_modules`, `\\\\.cache`, `&lt;rootDir>.*\/public`],\n  transformIgnorePatterns: [`node_modules\/(?!(gatsby)\/)`],\n  globals: {\n    __PATH_PREFIX__: ``,\n  },\n  testURL: `http:\/\/localhost`,\n  setupFiles: [`&lt;rootDir>\/loadershim.js`],\n}\n<\/pre><\/div>\n\n\n
    Create jest-preprocess.js<\/h4>\n\n\n
    \nconst babelOptions = {\n  presets: ["babel-preset-gatsby"],\n}\n\nmodule.exports = require("babel-jest").createTransformer(babelOptions)\n<\/pre><\/div>\n\n\n
    Create __mocks__\/file-mock.js (note double underscores)<\/h4>\n\n\n
    \n\/\/ frontend\/__mocks__\/file-mock.js\n\nmodule.exports = "test-file-stub"\n<\/pre><\/div>\n\n\n
    Create Global loadershim.js<\/h4>\n\n\n
    \n\/\/ frontend\/loadershim.js\n\nglobal.___loader = {\n  enqueue: jest.fn(),\n}\n<\/pre><\/div>\n\n\n
    Mock Gatsby<\/h4>\n\n\n
    \n# frontend\/__mocks__\/gatsby.js\n\nconst React = require("react")\nconst gatsby = jest.requireActual("gatsby")\n\nmodule.exports = {\n  ...gatsby,\n  graphql: jest.fn(),\n  Link: jest.fn().mockImplementation(\n    \/\/ these props are invalid for an `a` tag\n    ({\n      activeClassName,\n      activeStyle,\n      getProps,\n      innerRef,\n      partiallyActive,\n      ref,\n      replace,\n      to,\n      ...rest\n    }) =>\n      React.createElement("a", {\n        ...rest,\n        href: to,\n      })\n  ),\n  StaticQuery: jest.fn(),\n  useStaticQuery: jest.fn(),\n}\n<\/pre><\/div>\n\n\n
    Finally we need to update our package.json file where the default test script has not been set to jest.<\/p>\n\n\n
    \n\/\/ frontend\/package.json\n\n"scripts": {\n    "build": "gatsby build",\n    "develop": "gatsby develop",\n    "format": "prettier --write \\"**\/*.{js,jsx,ts,tsx,json,md}\\"",\n    "start": "npm run develop",\n    "serve": "gatsby serve",\n    "clean": "gatsby clean",\n    "test": "jest"\n<\/pre><\/div>\n\n\n
    Creating a Header Component<\/h4>\n\n\n\n
    Before we begin writing tests lets build a header component to display the title of our site. The component below is based is pulled from the Gatsby.js documentation for testing components with GraphQL<\/a> where they have a detailed breakdown of all the elements  in this header that will enable us to test with Jest.<\/p>\n\n\n\n
    Start by creating a new directory and header.js file:<\/p>\n\n\n
    \nmkdir frontend\/src\/components\ntouch frontend\/src\/components\/header.js\n<\/pre><\/div>\n\n\n
    … and populate the header.js file with the following:<\/p>\n\n\n
    \n\/\/ frontend\/src\/components\/header.js\n\n\/\/ 1)\nimport { Link } from "gatsby"\n\n\/\/ 2)\nimport PropTypes from "prop-types"\n\n\/\/ 3)\nimport React from "react"\n\n\/\/ 4)\nimport { useStaticQuery, graphql } from "gatsby"\n\n\/\/ 5)\nexport const PureHeader = ({ data }) => (\n\n  \/\/ 6)\n  &lt;header\n    style={{\n      background: `rebeccapurple`,\n      marginBottom: `1.45rem`,\n    }}\n  >\n    &lt;div\n      style={{\n        margin: `0 auto`,\n        maxWidth: 960,\n        padding: `1.45rem 1.0875rem`,\n      }}\n    >\n      &lt;h1 style={{ margin: 0 }}>\n\n        \/\/ 7)\n        &lt;Link\n          to="\/"\n          style={{\n            color: `white`,\n            textDecoration: `none`,\n          }}\n        >\n\n          \/\/ 8)\n          {data.site.siteMetadata.title}\n        &lt;\/Link>\n      &lt;\/h1>\n    &lt;\/div>\n  &lt;\/header>\n)\n\n\/\/ 9)\nexport const Header = props => {\n\n  \/\/ 10)\n  const data = useStaticQuery(graphql`\n    query {\n      site {\n        siteMetadata {\n          title\n        }\n      }\n    }\n  `)\n  \/\/ 11)\n  return &lt;PureHeader {...props} data={data}>&lt;\/PureHeader>\n}\n\n\/\/ 12)\nHeader.propTypes = {\n  siteTitle: PropTypes.string,\n}\n\n\/\/ 13)\nHeader.defaultProps = {\n  siteTitle: ``,\n}\n\n\/\/ 14\nexport default Header\n<\/pre><\/div>\n\n\n
    Structure of a Gatsby Component<\/h4>\n\n\n\n
    Lets break down what we are building in this header<\/strong> component step by step.<\/p>\n\n\n
    \n\/\/ 1)\nimport { Link } from "gatsby"\n<\/pre><\/div>\n\n\n
    We start by importing the Gatsby Link component which allows us to link between internal pages in Gatsby. When we want to navigate between internal Gatsby pages we will by using the Link tag instead of traditional anchor (a) tags.<\/p>\n\n\n
    \n\/\/ 2) \nimport PropTypes from "prop-types"\n<\/pre><\/div>\n\n\n
    We will be using propTypes which help us to keep track if our component is receiving the correct type data or not.<\/p>\n\n\n
    \n\/\/ 3)\nimport React from "react"\n<\/pre><\/div>\n\n\n
    Of course we import react since Gatsby is built on top of React.<\/p>\n\n\n
    \n\/\/ 4)\nimport { useStaticQuery, graphql } from "gatsby"\n<\/pre><\/div>\n\n\n
    We will be using useStaticQuery, (a React hook), and graphql to query the siteMetadata for the title we’ve set for our site in gatsby-config.js.<\/p>\n\n\n
    \n\/\/ 5)\nexport const PureHeader = ({ data }) => (\n<\/pre><\/div>\n\n\n
    Its this function PureHeader we will be testing with Jest. More on this later.<\/p>\n\n\n
    \n\/\/ 6)\n&lt;header\n    style={{\n      background: `rebeccapurple`,\n      marginBottom: `1.45rem`,\n    }}\n  >\n<\/pre><\/div>\n\n\n
    We define our HTML header element with some inline styling.<\/p>\n\n\n
    \n\/\/ 7)\n        &lt;Link\n          to="\/"\n          style={{\n            color: `white`,\n            textDecoration: `none`,\n          }}\n        >\n<\/pre><\/div>\n\n\n
    Using the Gatsby Link component we link the header to the index page of the site.<\/p>\n\n\n
    \n          \/\/ 8)\n          {data.site.siteMetadata.title}\n<\/pre><\/div>\n\n\n
    Using the data prop we passed into our function, we pull the title of our site from Gatsby-config.js. Note the curly braces. Anytime we want to embed a javascript snippet or in this case our {data.site.siteMetadata.title}<\/em> variable, we wrap the javascript code in braces.<\/p>\n\n\n
    \n\/\/ 9)\nexport const Header = props => {\n<\/pre><\/div>\n\n\n
    This is the second function where we will use useStaticQuery and graphql to query the siteMetadata in the Gatsby-config.js file.<\/p>\n\n\n
    \n  \/\/ 10)\n  const data = useStaticQuery(graphql`\n    query {\n      site {\n        siteMetadata {\n          title\n        }\n      }\n    }\n  `)\n<\/pre><\/div>\n\n\n
    Here we define the query with graphql and execute the query with useStaticQuery.<\/p>\n\n\n
    \n\/\/ 11)\n  return &lt;PureHeader {...props} data={data}>&lt;\/PureHeader>\n<\/pre><\/div>\n\n\n
    We return the PureHeader with the data<\/em> prop containing the siteMetadata.<\/p>\n\n\n
    \n\/\/ 12)\nHeader.propTypes = {\n  siteTitle: PropTypes.string,\n}\n<\/pre><\/div>\n\n\n
    Now we can implement  propTypes for our component which in this case is siteTitle of the PropType string. This isn’t absolutely necessary for the Gatsby component to render properly but it is a good coding practice to explicitly enforce type casting in our app.<\/p>\n\n\n
    \n\/\/ 13)\nHeader.defaultProps = {\n  siteTitle: ``,\n}\n<\/pre><\/div>\n\n\n
    Here we define the defaultProps which in this case is an empty string but, if we were to import this component into a page and not pass in the siteTitle argument we could define a default siteTitle.<\/p>\n\n\n
    \n\/\/ 14)\nexport default Header\n<\/pre><\/div>\n\n\n
    Finally we export our Header function to make available for import into a page or another component.<\/p>\n\n\n\n
    What is a Pure Function and Why Use It?<\/h4>\n\n\n\n
    We have two functions in this header.js file:<\/p>\n\n\n\n
    1. export const PureHeader<\/strong> = ({ data }) => ( \/\/ … code<\/li>
    2. export const Header<\/strong> = props => { \/\/ … code<\/li><\/ol>\n\n\n\n
      Of the two the first is a pure function. What is a pure function?<\/p>\n\n\n\n
      A pure function<\/a><\/strong> is a deterministic function<\/strong>. This means when a same input is passed every time, the function will return same output.<\/p>\n\n\n\n
      A pure function<\/strong> will have the following properties:<\/p>\n\n\n\n