Use jest with enzyme

.circleci/config.yml

@@ -30,6 +30,9 @@ jobs:
     working_directory: ~/repo
     steps:
       - build
+      - run:
+          name: Jest
+          command: yarn test:ci
       - run:
           name: Lint
           command: yarn lint

jest.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  preset: 'jest-preset-gatsby/typescript',
+  snapshotSerializers: ['enzyme-to-json/serializer'],
+  setupFilesAfterEnv: ['<rootDir>/setupEnzyme.js'],
+};

package.json

@@ -14,7 +14,8 @@
     "format:ci": "prettier 'src/**/*.{tsx,ts}'",
     "serve": "gatsby serve",
     "svg": "svgo {src/assets,static}/**/*.svg --enable=removeDimensions",
-    "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\"",
+    "test": "jest --watch",
+    "test:ci": "jest",
     "tsc": "tsc -p tsconfig.json --skipLibCheck",
     "reg": "reg-suit run",
     "lint": "eslint -c ./.eslintrc.js 'src/**/*.{js,ts,tsx}'",
@@ -26,6 +27,9 @@
     "@primer/octicons-react": "^9.2.0",
     "@storybook/react": "^5.2.5",
     "@types/react": "^16.9.9",
+    "enzyme": "^3.10.0",
+    "enzyme-adapter-react-16": "^1.15.1",
+    "enzyme-to-json": "^3.4.3",
     "gatsby": "^2.17.1",
     "gatsby-image": "^2.2.29",
     "gatsby-plugin-canonical-urls": "^2.1.13",
@@ -60,6 +64,10 @@
     "@storybook/addon-viewport": "^5.2.5",
     "@storybook/addons": "^5.2.5",
     "@storybook/source-loader": "^5.2.5",
+    "@types/enzyme": "^3.10.3",
+    "@types/enzyme-adapter-react-16": "^1.0.5",
+    "@types/enzyme-to-json": "^1.5.3",
+    "@types/jest": "^24.0.20",
     "@types/node": "^12.11.2",
     "@types/react-dom": "^16.9.2",
     "@types/react-helmet": "^5.0.12",
@@ -76,6 +84,8 @@
     "eslint-plugin-jsx-a11y": "^6.2.3",
     "eslint-plugin-prettier": "^3.1.1",
     "eslint-plugin-react": "^7.16.0",
+    "jest": "^24.9.0",
+    "jest-preset-gatsby": "^1.0.12",
     "prettier": "^1.18.2",
     "reg-keygen-git-hash-plugin": "^0.7.25",
     "reg-notify-github-plugin": "^0.7.26",

setupEnzyme.js

@@ -0,0 +1,4 @@
+import { configure } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+
+configure({ adapter: new Adapter() });

src/components/atoms/Button/__snapshots__/index.spec.tsx.snap

@@ -0,0 +1,7 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Button snapshot 1`] = `
+<styled.button>
+  ...
+</styled.button>
+`;

src/components/atoms/Button/index.spec.tsx

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { shallow } from 'enzyme';
+import toJson from 'enzyme-to-json';
+import Button from '.';
+
+describe('Button', () => {
+  it('snapshot', () => {
+    const tree = shallow(<Button>...</Button>);
+    expect(toJson(tree)).toMatchSnapshot();
+  });
+});

src/components/atoms/Container/__snapshots__/index.spec.tsx.snap

@@ -0,0 +1,7 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Container snapshot 1`] = `
+<styled.section>
+  ...
+</styled.section>
+`;

src/components/atoms/Container/index.spec.tsx

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { shallow } from 'enzyme';
+import toJson from 'enzyme-to-json';
+import Container from '.';
+
+describe('Container', () => {
+  it('snapshot', () => {
+    const tree = shallow(<Container>...</Container>);
+    expect(toJson(tree)).toMatchSnapshot();
+  });
+});

src/components/atoms/Input/__snapshots__/index.spec.tsx.snap

@@ -0,0 +1,63 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Input snapshot 1`] = `
+<StyledComponent
+  forwardedComponent={
+    Object {
+      "$$typeof": Symbol(react.forward_ref),
+      "attrs": Array [],
+      "componentStyle": ComponentStyle {
+        "componentId": "sc-bdVaJa",
+        "isStatic": false,
+        "rules": Array [
+          "
+  ",
+          "
+  width: 100%;
+  font-size: ",
+          [Function],
+          ";
+  color: ",
+          [Function],
+          ";
+  background: transparent;
+  outline: none;
+  box-shadow: none;
+  padding: 0 ",
+          [Function],
+          ";
+  border-top: 0;
+  border-left: 0;
+  border-right: 0;
+  border-bottom: 1px solid ",
+          [Function],
+          ";
+  transition: background, border-bottom 0.2s;
+
+  &:focus {
+    border-bottom: 1px solid ",
+          [Function],
+          ";
+    background: rgba(61, 16, 107, 0.15);
+  }
+",
+          "
+
+  height: 40px;
+",
+        ],
+      },
+      "displayName": "styled.input",
+      "foldedComponentIds": Array [],
+      "render": [Function],
+      "styledComponentId": "sc-bdVaJa",
+      "target": "input",
+      "toString": [Function],
+      "usesTheme": true,
+      "warnTooManyClasses": [Function],
+      "withComponent": [Function],
+    }
+  }
+  forwardedRef={null}
+/>
+`;

src/components/atoms/Input/index.spec.tsx

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { shallow } from 'enzyme';
+import toJson from 'enzyme-to-json';
+import Input from '.';
+
+describe('Input', () => {
+  it('snapshot', () => {
+    const tree = shallow(<Input />);
+    expect(toJson(tree)).toMatchSnapshot();
+  });
+});

src/components/atoms/Lists/__snapshots__/index.spec.tsx.snap

@@ -0,0 +1,42 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`List snapshot 1`] = `
+<styled.ul
+  items={
+    Array [
+      Object {
+        "linkUrl": "https://blivesta.com",
+        "title": "foo",
+      },
+      Object {
+        "title": "bar",
+      },
+      Object {
+        "title": "baz",
+      },
+    ]
+  }
+>
+  <styled.li
+    key="0"
+  >
+    <styled.a
+      href="https://blivesta.com"
+      rel="noopener noreferrer"
+      target="_blank"
+    >
+      foo
+    </styled.a>
+  </styled.li>
+  <styled.li
+    key="1"
+  >
+    bar
+  </styled.li>
+  <styled.li
+    key="2"
+  >
+    baz
+  </styled.li>
+</styled.ul>
+`;

src/components/atoms/Lists/index.spec.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { shallow } from 'enzyme';
+import toJson from 'enzyme-to-json';
+import List from '.';
+
+describe('List', () => {
+  it('snapshot', () => {
+    const tree = shallow(
+      <List
+        items={[
+          {
+            title: 'foo',
+            linkUrl: 'https://blivesta.com',
+          },
+          {
+            title: 'bar',
+          },
+          {
+            title: 'baz',
+          },
+        ]}
+      />,
+    );
+    expect(toJson(tree)).toMatchSnapshot();
+  });
+});

src/components/atoms/Logo/__snapshots__/index.spec.tsx.snap

@@ -0,0 +1,15 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Logo snapshot 1`] = `
+<svg
+  viewBox="0 0 512 512"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <styled.path
+    d="M0 0h512v512H0z"
+  />
+  <styled.path
+    d="M280.448 0L152.545 127.712 280.48 255.424 152 383.712 280.448 512H512V0H280.448zm119.568 440L336 376l64.016-64L464 376l-63.984 64zm0-240L336 136l64.016-64L464 136l-63.984 64z"
+  />
+</svg>
+`;

src/components/atoms/Logo/index.spec.tsx

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { shallow } from 'enzyme';
+import toJson from 'enzyme-to-json';
+import Logo from '.';
+
+describe('Logo', () => {
+  it('snapshot', () => {
+    const tree = shallow(<Logo />);
+    expect(toJson(tree)).toMatchSnapshot();
+  });
+});

src/components/atoms/P/__snapshots__/index.spec.tsx.snap

@@ -0,0 +1,7 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`P snapshot 1`] = `
+<styled.p>
+  この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。
+</styled.p>
+`;

src/components/atoms/P/index.spec.tsx

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { shallow } from 'enzyme';
+import toJson from 'enzyme-to-json';
+import P from '.';
+
+describe('P', () => {
+  it('snapshot', () => {
+    const tree = shallow(
+      <P>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。</P>,
+    );
+    expect(toJson(tree)).toMatchSnapshot();
+  });
+});

src/components/atoms/SubTitle/__snapshots__/index.spec.tsx.snap

@@ -0,0 +1,43 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`SubTitle snapshot 1`] = `
+<StyledComponent
+  forwardedComponent={
+    Object {
+      "$$typeof": Symbol(react.forward_ref),
+      "attrs": Array [],
+      "componentStyle": ComponentStyle {
+        "componentId": "sc-bdVaJa",
+        "isStatic": false,
+        "rules": Array [
+          "
+  font-family: ",
+          [Function],
+          ";
+  font-size: ",
+          [Function],
+          ";
+  text-transform: uppercase;
+  line-height: 1;
+  margin-top: 0;
+  letter-spacing: 0.15em;
+  text-indent: 0.15em;
+",
+        ],
+      },
+      "displayName": "styled.h3",
+      "foldedComponentIds": Array [],
+      "render": [Function],
+      "styledComponentId": "sc-bdVaJa",
+      "target": "h3",
+      "toString": [Function],
+      "usesTheme": true,
+      "warnTooManyClasses": [Function],
+      "withComponent": [Function],
+    }
+  }
+  forwardedRef={null}
+>
+  ...
+</StyledComponent>
+`;

src/components/atoms/SubTitle/index.spec.tsx

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { shallow } from 'enzyme';
+import toJson from 'enzyme-to-json';
+import SubTitle from '.';
+
+describe('SubTitle', () => {
+  it('snapshot', () => {
+    const tree = shallow(<SubTitle>...</SubTitle>);
+    expect(toJson(tree)).toMatchSnapshot();
+  });
+});