Test Jest Github Actions

.github/workflows/jest.yml

@@ -0,0 +1,25 @@
+name: CI
+
+on:
+  pull_request:
+    branches:
+      - main
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v2
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v2
+        with:
+          node-version: '16'
+
+      - name: Install dependencies
+        run: npm install --legacy-peer-deps
+
+      - name: Run Jest tests
+        run: npm run jest --ci

.gitignore

@@ -21,3 +21,4 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+

.husky/pre-push

@@ -0,0 +1 @@
+npm run jest

__tests__/__snapshots__/snapshot.test.tsx.snap

@@ -0,0 +1,24 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`matches snapshot 1`] = `
+<div>
+  <h1>
+    Counter
+  </h1>
+  <p
+    data-testid="count"
+  >
+    0
+  </p>
+  <button
+    onClick={[Function]}
+  >
+    Increment
+  </button>
+  <button
+    onClick={[Function]}
+  >
+    Decrement
+  </button>
+</div>
+`;

__tests__/snapshot.test.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import '@testing-library/jest-dom';
+import App from '../src/App';
+import renderer from 'react-test-renderer';
+
+test('matches snapshot', () => {
+	const tree = renderer.create(<App />).toJSON();
+	expect(tree).toMatchSnapshot();
+});

__tests__/unit.test.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import App from '../src/App';
+
+test('renders the counter', () => {
+	render(<App />);
+	const headingElement = screen.getByText(/Counter/i);
+	expect(headingElement).toBeInTheDocument();
+});
+
+test('increments the counter', () => {
+	render(<App />);
+	const incrementButton = screen.getByText(/Increment/i);
+	const countElement = screen.getByTestId('count');
+
+	fireEvent.click(incrementButton);
+	expect(countElement).toHaveTextContent('1');
+});
+
+test('decrements the counter', () => {
+	render(<App />);
+	const decrementButton = screen.getByText(/Decrement/i);
+	const countElement = screen.getByTestId('count');
+
+	fireEvent.click(decrementButton);
+	expect(countElement).toHaveTextContent('-1');
+});

__tests__/visual.test.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import 'expect-puppeteer';
+
+const { toMatchImageSnapshot } = require('jest-image-snapshot');
+expect.extend({ toMatchImageSnapshot });
+
+jest.setTimeout(30000);
+
+describe('Visual Regression Tests', () => {
+	beforeAll(async () => {
+		await page.goto('http://localhost:3000');
+		await page.setViewport({ width: 1200, height: 800 });
+	}, 30000);
+
+	it('should visually match the snapshot', async () => {
+		const image = await page.screenshot();
+		expect(image).toMatchImageSnapshot({
+			failureThreshold: 0.01, // 1% threshold
+			failureThresholdType: 'percent', // Use percentage threshold
+		});
+	}, 30000);
+});

babel.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+	presets: [
+		'@babel/preset-env',
+		'@babel/preset-react',
+		'@babel/preset-typescript',
+	],
+};

jest-puppeteer.config.js

@@ -0,0 +1,11 @@
+module.exports = {
+	launch: {
+		headless: true,
+	},
+	server: {
+		command: 'npm start',
+		port: 3000,
+		launchTimeout: 10000,
+		debug: true,
+	},
+};

jest.config.js

@@ -0,0 +1,28 @@
+module.exports = {
+	globals: {
+		'ts-jest': {
+			tsconfig: 'tsconfig.json',
+		},
+	},
+	projects: [
+		{
+			displayName: 'snapshot',
+			preset: 'ts-jest',
+			testEnvironment: 'jest-environment-jsdom',
+			setupFilesAfterEnv: ['<rootDir>/setupTests.js'],
+			testMatch: ['<rootDir>/__tests__/snapshot.test.tsx'],
+		},
+		{
+			displayName: 'unit',
+			preset: 'ts-jest',
+			testEnvironment: 'jest-environment-jsdom',
+			setupFilesAfterEnv: ['<rootDir>/setupTests.js'],
+			testMatch: ['<rootDir>/__tests__/unit.test.tsx'],
+		},
+		{
+			displayName: 'visual',
+			preset: 'jest-puppeteer',
+			testMatch: ['<rootDir>/__tests__/visual.test.ts'],
+		},
+	],
+};