Merge pull request #101 from openscript-ch/94-configure-and-write-tests

94 configure and write tests

Author: openscript

.github/workflows/continuous-integration.yml

@@ -1,6 +1,12 @@
 name: Continuous Integration
 
-on: pull_request
+on:
+  pull_request:
+    branches:
+      - develop
+  push:
+    branches:
+      - develop
 
 jobs:
   check:
@@ -27,5 +33,8 @@ jobs:
       - name: Run tests
         run: yarn test
 
+      - name: Submit coverage
+        uses: codecov/codecov-action@v3
+
       - name: Try to build
         run: yarn build

__mock__/file-mock.js

@@ -0,0 +1 @@
+module.exports = 'test-file-stub';

__mock__/gatsby.js

@@ -0,0 +1,22 @@
+const React = require('react');
+const gatsby = jest.requireActual('gatsby');
+
+module.exports = {
+  ...gatsby,
+  graphql: jest.fn(),
+  Link: jest.fn().mockImplementation(
+    // these props are invalid for an `a` tag
+    ({ activeClassName, activeStyle, getProps, innerRef, partiallyActive, ref, replace, to, ...rest }) =>
+      React.createElement('a', {
+        ...rest,
+        href: to,
+      })
+  ),
+  Slice: jest.fn().mockImplementation(({ alias, ...rest }) =>
+    React.createElement('div', {
+      ...rest,
+      'data-test-slice-alias': alias,
+    })
+  ),
+  useStaticQuery: jest.fn(),
+};

gatsby-node.ts

@@ -1,7 +1,7 @@
 import { GatsbyNode } from 'gatsby';
 import { CreateGenericPages } from './src/gatsby/createPages/createGenericPages';
 import { customizeSitePageContext } from './src/gatsby/createSchemaCustomization/customizeSitePageContext';
-import { GeneratePageMetaData } from './src/gatsby/onCreatePage/generatePageMetaData';
+import { generatePageMetaData } from './src/gatsby/onCreatePage/generatePageMetaData';
 
 export const createPages: GatsbyNode['createPages'] = async args => {
   await CreateGenericPages(args);
@@ -12,5 +12,5 @@ export const createSchemaCustomization: GatsbyNode['createSchemaCustomization']
 };
 
 export const onCreatePage: GatsbyNode<Record<string, unknown>, Queries.SitePageContext>['onCreatePage'] = async args => {
-  await GeneratePageMetaData(args);
+  await generatePageMetaData(args);
 };

jest-preprocess.js

@@ -0,0 +1,4 @@
+const babelOptions = {
+  presets: ['babel-preset-gatsby', '@babel/preset-typescript', ['@babel/preset-react', { runtime: 'automatic' }]],
+};
+module.exports = require('babel-jest').default.createTransformer(babelOptions);

jest.config.js

@@ -0,0 +1,22 @@
+module.exports = {
+  transform: {
+    '^.+\\.[jt]sx?$': '<rootDir>/jest-preprocess.js',
+  },
+  moduleNameMapper: {
+    '.+\\.(css|styl|less|sass|scss)$': `identity-obj-proxy`,
+    '.+\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': `<rootDir>/__mocks__/file-mock.js`,
+  },
+  testPathIgnorePatterns: [`node_modules`, `\\.cache`, `<rootDir>.*/public`, `<rootDir>.*/dist`],
+  transformIgnorePatterns: [`node_modules/(?!(gatsby|gatsby-script|gatsby-link)/)`],
+  globals: {
+    __PATH_PREFIX__: ``,
+  },
+  testEnvironment: 'jsdom',
+  testEnvironmentOptions: {
+    url: `http://localhost`,
+  },
+  setupFiles: [`<rootDir>/loadershim.js`],
+  setupFilesAfterEnv: ['<rootDir>/setup-test-env.js'],
+  collectCoverage: true,
+  collectCoverageFrom: [`src/**/*.{ts,tsx}`],
+};

loadershim.js

@@ -0,0 +1,3 @@
+global.___loader = {
+  enqueue: jest.fn(),
+};

package.json

@@ -37,13 +37,17 @@
   },
   "devDependencies": {
     "@babel/core": "7.20.12",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^13.4.0",
     "@types/mdx": "^2.0.3",
     "@types/node": "18.11.18",
     "@types/react": "18.0.26",
     "@types/react-dom": "18.0.10",
     "@typescript-eslint/eslint-plugin": "5.48.1",
     "@typescript-eslint/parser": "5.48.1",
     "babel-eslint": "10.1.0",
+    "babel-jest": "^29.3.1",
+    "babel-preset-gatsby": "^3.4.0",
     "eslint": "8.31.0",
     "eslint-config-airbnb": "19.0.4",
     "eslint-config-airbnb-typescript": "17.0.0",
@@ -54,6 +58,9 @@
     "eslint-plugin-prettier": "4.2.1",
     "eslint-plugin-react": "7.32.0",
     "eslint-plugin-react-hooks": "4.6.0",
+    "identity-obj-proxy": "^3.0.0",
+    "jest": "^29.3.1",
+    "jest-environment-jsdom": "^29.3.1",
     "prettier": "2.8.2",
     "svg-sprite": "^2.0.2",
     "ts-node": "10.9.1",
@@ -70,12 +77,13 @@
     "check:format": "eslint . --max-warnings 0",
     "check:types": "tsc --noEmit",
     "check:watch-types": "tsc --noEmit --watch",
+    "dev:test": "jest --watch",
     "develop": "gatsby develop",
     "format": "prettier --write \"**/*.{js,jsx,ts,tsx,json,md}\"",
     "start": "yarn run develop",
     "serve": "gatsby serve",
     "clean": "gatsby clean",
-    "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\"",
+    "test": "jest",
     "prestart": "yarn run build:sprite",
     "prebuild": "yarn run build:sprite"
   },

setup-test-env.js

@@ -0,0 +1 @@
+import "@testing-library/jest-dom"

src/components/Sprite.test.tsx

@@ -0,0 +1,9 @@
+import { render } from '@testing-library/react';
+import { Sprite } from './Sprite';
+
+describe('<Sprite />', () => {
+  it('should match snapshot', () => {
+    const { asFragment } = render(<Sprite name="arrow" />);
+    expect(asFragment()).toMatchSnapshot();
+  });
+});