test: article

jest.config.js

@@ -0,0 +1,17 @@
+import nextJest from 'next/jest.js'
+
+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 config = {
+  coverageProvider: 'v8',
+  testEnvironment: 'jsdom'
+  // Add more setup options before each test is run
+  // setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
+}
+
+// createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async
+export default createJestConfig(config)

package.json

@@ -12,7 +12,8 @@
     "link": "npx standard",
     "format": "npx standard --fix",
     "prepare": "husky",
-    "deploy": "./util/deploy-gcloud.sh"
+    "deploy": "./util/deploy-gcloud.sh",
+    "test": "jest"
   },
   "dependencies": {
     "next": "14.1.1",
@@ -25,11 +26,16 @@
     "@babel/preset-react": "^7.23.3",
     "@commitlint/cli": "^19.1.0",
     "@commitlint/config-conventional": "^19.1.0",
+    "@testing-library/jest-dom": "^6.4.2",
+    "@testing-library/react": "^14.2.1",
+    "@types/jest": "^29.5.12",
     "eslint": "^8",
     "eslint-config-next": "14.1.1",
     "front-matter": "^4.0.2",
     "frontmatter-markdown-loader": "^3.7.0",
     "husky": "^9.0.11",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
     "js-yaml": "^4.1.0",
     "next-sitemap": "^4.2.3",
     "showdown": "^2.1.0",

src/components/Article/Article.jsx

@@ -21,7 +21,7 @@ function Article ({ attributes, html }) {
         <p>{attributes.desc}</p>
         {attributes.pubdate && <p>{attributes.pubdate}</p>}
         <hr />
-        <div dangerouslySetInnerHTML={{ __html: html }} />
+        <div data-test='content' dangerouslySetInnerHTML={{ __html: html }} />
       </div>
     </section>
   )

src/components/Article/Article.test.jsx

@@ -0,0 +1,45 @@
+/* eslint-env jest */
+import { render } from '@testing-library/react'
+import Article from './Article'
+import '@testing-library/jest-dom'
+
+describe('Article', () => {
+  it('renders title', () => {
+    const props = generateArticleProps()
+    const { getByText } = render(<Article {...props} />)
+    const titleElement = getByText(props.attributes.title)
+    expect(titleElement).toBeInTheDocument()
+  })
+
+  it('renders description', () => {
+    const props = generateArticleProps()
+    const { getByText } = render(<Article {...props} />)
+    const descriptionElement = getByText(props.attributes.desc)
+    expect(descriptionElement).toBeInTheDocument()
+  })
+
+  it('renders pubdate if available', () => {
+    const props = generateArticleProps()
+    const { getByText } = render(<Article {...props} />)
+    const pubdateElement = getByText(props.attributes.pubdate)
+    expect(pubdateElement).toBeInTheDocument()
+  })
+
+  it('renders content', () => {
+    const props = generateArticleProps()
+    const { container } = render(<Article {...props} />)
+    const contentElement = container.querySelector('[data-test=content]')
+    expect(contentElement.innerHTML).toBe(props.html)
+  })
+})
+
+function generateArticleProps () {
+  return {
+    attributes: {
+      title: 'My title',
+      desc: 'My description',
+      pubdate: new Date().toUTCString()
+    },
+    html: '<p>This is my content!</p>'
+  }
+}

src/components/CV/CV.jsx

@@ -50,7 +50,7 @@ function CVWorkExperience ({ position, employer, start, end, children }) {
           <time>{start}</time> - <time>{end}</time>
         </small>
       </div>
-      <div dangerouslySetInnerHTML={{ __html: children }} />
+      <div data-test='children' dangerouslySetInnerHTML={{ __html: children }} />
     </div>
   )
 }