GitHub action jest

.github/workflows/lighthouse.yml

@@ -0,0 +1,15 @@
+name: Lighthouse CI
+on:
+  push:
+    branches: [ main ]
+  pull_request:
+    branches: [ main ]
+jobs:
+  lighthouseci:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v1
+      - run: npm install && npm install -g @lhci/[email protected]
+      - run: npm run build
+      - run: lhci autorun

.github/workflows/node.js.yml

@@ -0,0 +1,30 @@
+# This workflow will do a clean install of node dependencies, build the source code and run tests across different versions of node
+# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
+
+name: Node.js CI
+
+on:
+  push:
+    branches: [ main ]
+  pull_request:
+    branches: [ main ]
+
+jobs:
+  build:
+
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [10.x, 12.x, 14.x, 15.x]
+        # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
+
+    steps:
+    - uses: actions/checkout@v2
+    - name: Use Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v1
+      with:
+        node-version: ${{ matrix.node-version }}
+    - run: npm ci
+    - run: npm run build --if-present
+    - run: npm test

package.json

@@ -6,7 +6,6 @@
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
-    "@types/jest": "^26.0.15",
     "@types/node": "^12.0.0",
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.0",
@@ -43,12 +42,16 @@
     ]
   },
   "devDependencies": {
+    "@axe-core/react": "^4.1.1",
     "@storybook/addon-a11y": "^6.1.17",
     "@storybook/addon-actions": "^6.1.17",
     "@storybook/addon-essentials": "^6.1.17",
     "@storybook/addon-links": "^6.1.17",
     "@storybook/node-logger": "^6.1.17",
     "@storybook/preset-create-react-app": "^3.1.5",
-    "@storybook/react": "^6.1.17"
+    "@storybook/react": "^6.1.17",
+    "@types/jest": "^26.0.20",
+    "@types/jest-axe": "^3.5.1",
+    "jest-axe": "^4.1.0"
   }
 }

src/App.test.tsx

@@ -1,9 +1,12 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import App from './App';
+import React from "react"
+import App from "./App"
+import { render } from "@testing-library/react"
+import { axe, toHaveNoViolations } from "jest-axe"
 
-test('renders learn react link', () => {
-  render(<App />);
-  const linkElement = screen.getByText(/learn react/i);
-  expect(linkElement).toBeInTheDocument();
-});
+expect.extend(toHaveNoViolations)
+
+it("should not have any accessibility violations", async () => {
+  const { container } = render(<App />)
+  const results = await axe(container)
+  expect(results).toHaveNoViolations()
+})

src/App.tsx

@@ -1,26 +1,18 @@
-import React from 'react';
-import logo from './logo.svg';
-import './App.css';
+import React from "react"
+import ReactDOM from "react-dom"
+import { ColorImage } from "./stories/ColorImage"
+
+if (process.env.NODE_ENV !== "production") {
+  const axe = require("@axe-core/react")
+  axe(React, ReactDOM, 1000)
+}
 
 function App() {
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.tsx</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
+    <div>
+      <ColorImage role="asdfa" />
     </div>
-  );
+  )
 }
 
-export default App;
+export default App

src/stories/ColorImage.tsx

@@ -1,10 +1,7 @@
 import React from "react"
 import Image from "./ColorImage.jpeg"
 
-export const ColorImage: React.FC = () => (
-  <img
-    src={Image}
-    alt="A bunch of chocolate candies with different colors"
-    width="500px"
-  />
-)
+export const ColorImage: React.FC<{ alt?: string; role?: string }> = ({
+  alt,
+  role,
+}) => <img src={Image} role={role} alt={alt} width="600px" />

tsconfig.json

@@ -1,41 +1,41 @@
 {
   "compilerOptions": {
-      "allowJs": false,
-      "allowSyntheticDefaultImports": true,
-      "baseUrl": ".",
-      "esModuleInterop": true,
-      "forceConsistentCasingInFileNames": true,
-      "isolatedModules": true,
-      "jsx": "react",
-      "lib": ["dom", "es2018"],
-      "moduleResolution": "node",
-      "noFallthroughCasesInSwitch": true,
-      "noImplicitAny": true,
-      "noImplicitReturns": true,
-      "noImplicitThis": true,
-      "noUnusedLocals": true,
-      "noUnusedParameters": true,
-      "paths": {
-          "@content/*": ["content/*"],
-          "@context/*": ["src/context/*"],
-          "@components/*": ["src/components/*"],
-          "@layouts/*": ["src/layouts/*"],
-          "@hooks/*": ["src/hooks/*"],
-          "@images/*": ["src/images/*"],
-          "@data/*": ["src/data/*"],
-          "@utils/*": ["src/utils/*"],
-          "@styles/*": ["src/styles/*"],
-      },
-      "preserveConstEnums": true,
-      "removeComments": false,
-      "resolveJsonModule": true,
-      "skipLibCheck": true,
-      "sourceMap": true,
-      "strict": true,
-      "typeRoots": [
-          "./src/types"
-      ]
+    "allowJs": false,
+    "allowSyntheticDefaultImports": true,
+    "baseUrl": ".",
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "lib": [
+      "dom",
+      "es2018"
+    ],
+    "moduleResolution": "node",
+    "noFallthroughCasesInSwitch": true,
+    "noImplicitAny": true,
+    "noImplicitReturns": true,
+    "noImplicitThis": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "preserveConstEnums": true,
+    "removeComments": false,
+    "resolveJsonModule": true,
+    "skipLibCheck": true,
+    "sourceMap": true,
+    "strict": true,
+    "typeRoots": [
+      "./src/types"
+    ],
+    "target": "es5",
+    "module": "esnext",
+    "noEmit": true
   },
-  "exclude": ["node_modules"],
-  "include": ["**/*.ts", "**/*.tsx"]
+  "exclude": [
+    "node_modules"
+  ],
+  "include": [
+    "**/*.ts",
+    "**/*.tsx"
+  ]
 }