tests: begin adding tests

jest.config.ts

@@ -9,13 +9,14 @@ const config = {
   clearMocks: true,
   collectCoverage: true,
   collectCoverageFrom: [
-    './src/**/*.ts',
+    './src/**/*.(ts|tsx)',
     '!**/tests/**',
     '!/node_modules',
+    '!./src/docs/**',
   ],
   coverageDirectory: 'coverage',
   coverageReporters: ['json', 'text', 'html'],
-  testMatch: ['**/tests/**/*.(test|spec|jest).ts'],
+  testMatch: ['**/tests/**/*.(test|spec|jest).(ts|tsx)'],
   testPathIgnorePatterns: ['tests/(setup|testUtils).ts'],
   verbose: true,
 };

tests/unit/Fence.spec.tsx

@@ -0,0 +1,40 @@
+import '@testing-library/jest-dom';
+import { render } from '@testing-library/react';
+import Prism from 'prismjs';
+import Fence from '../../src/app/components/Fence';
+
+describe('Fence component', () => {
+  it('renders a code block with highlighted syntax', () => {
+    const content = 'console.log(app)';
+    const language = 'javascript';
+    const highlightedCode = `
+      console
+      <span class="token function">log</span>
+      <span class="token punctuation">(</span>
+      app
+      <span class="token punctuation">)</span>
+      <span class="token punctuation">;</span>
+    `;
+
+    jest
+      .spyOn(Prism, 'highlight')
+      .mockReturnValue(highlightedCode);
+
+    const { container } = render(
+      <Fence content={content} language={language} />
+    );
+
+    const codeBlocks =
+      container.getElementsByTagName('code');
+    expect(codeBlocks).toHaveLength(1);
+
+    const codeBlock = codeBlocks[0];
+    expect(codeBlock).toBeInTheDocument();
+    expect(codeBlock.innerHTML).toEqual(highlightedCode);
+    expect(Prism.highlight).toHaveBeenCalledWith(
+      content,
+      Prism.languages[language],
+      language
+    );
+  });
+});