feat: ✅ Enable jest and react-testing-library for unit testing

Added a simple test for the Tile component and auth utility function. Page testing is problematic due to the i18n configuration, its do-able, just was taking too much time.

.github/workflows/develop.yml

@@ -32,5 +32,5 @@ jobs:
           yarn install --frozen-lockfile
           yarn lint
           yarn build
-          yarn test
+          yarn test:ci
 

.github/workflows/stage.yml

@@ -30,7 +30,7 @@ jobs:
           yarn install --frozen-lockfile
           yarn lint
           yarn build
-          yarn test
+          yarn test:ci
 
   e2e:
     runs-on: ubuntu-latest

.vscode/settings.json

@@ -3,16 +3,18 @@
     "appleboy",
     "browserstack",
     "callout",
-    "Downey",
     "dropdowns",
     "FDROID",
     "fontawesome",
     "fortawesome",
     "nightwatch",
     "perrywinkle",
     "PGPASSWORD",
-    "podverse",
     "scrollbars",
-    "stylelint"
+    "stylelint",
+    "Creonopoulos",
+    "Downey",
+    "FOSS",
+    "Podverse"
   ]
 }

jest.config.js

@@ -0,0 +1,23 @@
+const nextJest = require('next/jest')
+
+const createJestConfig = nextJest({
+  // Provide the path to your Next.js app to load next.config.js and .env files in your test environment
+  dir: './'
+})
+
+// Add any custom config to be passed to Jest
+const customJestConfig = {
+  setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
+  moduleNameMapper: {
+    // Handle module aliases (this will be automatically configured for you soon)
+    '^@/components/(.*)$': '<rootDir>/src/components/$1',
+
+    '^@/pages/(.*)$': '<rootDir>/pages/$1',
+    '^~/(.*)$': '<rootDir>/src/$1'
+  },
+  testEnvironment: 'jest-environment-jsdom',
+  testPathIgnorePatterns: ['__tests__/e2e', '__tests__/old_tests']
+}
+
+// createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async
+module.exports = createJestConfig(customJestConfig)

jest.setup.js

@@ -0,0 +1,6 @@
+import '@testing-library/jest-dom/extend-expect'
+import { setConfig } from 'next/config'
+import config from './next.config'
+
+// Make sure you can use "publicRuntimeConfig" within tests.
+setConfig(config.publicRuntimeConfig)

next.config.js

@@ -3,10 +3,7 @@ const { i18n } = require('./next-i18next.config')
 const { withSentryConfig } = require('@sentry/nextjs')
 
 const isDev = process.env.NODE_ENV === 'development' || !process.env.NODE_ENV
-console.log({
-  env: process.env.NODE_ENV,
-  isDev
-})
+
 const envVars = {}
 const sentryWebpackPluginOptions = {
   // Additional config options for the Sentry Webpack plugin. Keep in mind that

package.json

@@ -26,7 +26,8 @@
     "lint:ts": "tsc --noEmit",
     "lint:prettier": "npm run prettier:check",
     "lint:stylelint": "stylelint '**/*.scss'",
-    "test": "exit 0;",
+    "test": "jest --watch",
+    "test:ci": "jest --ci",
     "stylelint:fix": "stylelint --fix '**/*.scss'",
     "prettier:base": "prettier",
     "prettier:list": "npm run prettier:base -- --list-different \"styles/**/*.scss\" \"src/**/*.{ts,tsx,scss}\" \"pages/**/*.{ts,tsx,scss}\" \"__tests__/**/*.{ts,js,tsx}\"",
@@ -72,13 +73,18 @@
     "striptags": "3.2.0"
   },
   "devDependencies": {
+    "@testing-library/jest-dom": "5.16.1",
+    "@testing-library/react": "12.1.2",
+    "@testing-library/user-event": "13.5.0",
     "@types/node": "16.11.11",
     "@types/react": "17.0.37",
     "@typescript-eslint/eslint-plugin": "5.6.0",
     "@typescript-eslint/parser": "5.5.0",
+    "babel-jest": "27.4.6",
     "eslint": "7.32.0",
     "eslint-config-next": "12.0.4",
     "eslint-config-prettier": "8.3.0",
+    "jest": "27.4.7",
     "lint-staged": "12.1.2",
     "npm-run-all": "4.1.5",
     "postcss": "8.4.5",

pages/about.tsx

@@ -58,7 +58,7 @@ export default function About(props: ServerProps) {
                 <li>Subscribe to playlists</li>
               </ul>
               <p>
-                All Podverse software is provided under a free and open source (FOSS) licence. Features that require
+                All Podverse software is provided under a free and open source (FOSS) license. Features that require
                 updating our servers are available only with a Premium membership. Sign up today and get 1 year of
                 Premium for free{' '}
                 <span role='img' aria-label='partying face emoji'>

src/components/Tile/__tests__/Tile.test.tsx

@@ -0,0 +1,15 @@
+import { render, screen } from '@testing-library/react'
+import { noop } from '~/lib/test-helpers'
+import { Tile } from '../Tile'
+
+describe('Title', () => {
+  it('renders a heading', () => {
+    render(<Tile title='Some Text' onClick={noop} />)
+
+    const heading = screen.getByRole('heading', {
+      name: /Some Text/i
+    })
+
+    expect(heading).toBeInTheDocument()
+  })
+})

src/lib/test-helpers.ts

@@ -0,0 +1,3 @@
+// eslint-disable-next-line @typescript-eslint/no-empty-function
+export const noop = () => {}
+export const identity = <T>(t: T) => t

src/lib/utility/__tests__/auth.test.ts

@@ -0,0 +1,17 @@
+import { getAuthCredentialsHeaders } from '../auth'
+
+describe('auth', () => {
+  it('returns a headers authorization object when passed a token', () => {
+    const fakeToken = 'some-token-here'
+    const result = getAuthCredentialsHeaders(fakeToken)
+
+    expect(result).toHaveProperty('headers')
+    expect(result.headers).toHaveProperty('Authorization', fakeToken)
+  })
+
+  it('returns cookie auth when no token is provided', () => {
+    const result = getAuthCredentialsHeaders()
+
+    expect(result).toHaveProperty('withCredentials', true)
+  })
+})

src/resources/Config.ts

@@ -2,7 +2,8 @@ import getConfig from 'next/config'
 const { publicRuntimeConfig, serverRuntimeConfig } = getConfig()
 
 const getServerOrPublicVariable = (envVarKey: string) =>
-  serverRuntimeConfig[envVarKey] || publicRuntimeConfig[envVarKey]
+  // optional chaining helps with the test environment
+  serverRuntimeConfig?.[envVarKey] || publicRuntimeConfig?.[envVarKey]
 
 const API_PROTOCOL = getServerOrPublicVariable('API_PROTOCOL')
 const API_DOMAIN = getServerOrPublicVariable('API_DOMAIN')