Gatsby Recipes

gatsby-recipe-emotion

# Emotion

This recipe helps you start developing with the Emotion CSS in JS library

<Config
  conflictsWith="gatsby-recipe-styled-components"
/>

---

Install necessary packages

<InstallPackages
  name={["gatsby-plugin-emotion", "@emotion/core", "@emotion/styled"]}
/>

---

Adding `gatsby-plugin-emotion` to your `gatsby-config.js`. It provides support
for Emotion during Gatsby's server side rendering.

<InstallGatsbyPlugin
  name="gatsby-plugin-emotion"
/>

---

You can now use Emotion in your site!


---

<Meta stepType="example" />

Check out the example Emotion page to start playing with it!

<WriteExampleFile path="src/pages/emotion-sample.js">
import React from "react"
import { css } from "@emotion/core"

export default () => (
  <div>
    <p
      css={{
        background: "pink",
        color: "blue",
      }}
    >
      This page is using Emotion.
    </p>
  </div>
)
</WriteExampleFile>

gatsby-recipe-jest

# Jest

This recipe helps you setup Jest in your Gatsby site to test components and utilities

---

Installing the `jest` package

<InstallDevPackage name="jest" />

---

<Meta stepType="example" />

Adding some jest test files for you to play with

<WriteFile path="src/jest-example/sum.js">
function sum(a, b) {
  return a + b;
}
module.exports = sum;
</WriteFile>

<WriteFile path="src/jest-example/sum.test.js">
const sum = require('./sum');

test('adds 1 + 2 to equal 3', () => {
  expect(sum(1, 2)).toBe(3);
});
</WriteFile>

---

Adding a `test` & `test:watch` scripts to your package.json.

Now Try running `npm run test` — jest will run your test!

While writing tests you can run `npm run test:watch` and tests will re-run
as you edit them.

<SetNpmScript
  name="test"
  command="jest"
/>

<SetNpmScript
  name="test:watch"
  command="jest --watch"
/>