diff --git a/jest.config.ts b/jest.config.ts
index 274dd68..23c15bb 100644
--- a/jest.config.ts
+++ b/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,
};
diff --git a/tests/unit/Fence.spec.tsx b/tests/unit/Fence.spec.tsx
new file mode 100644
index 0000000..9f00ae1
--- /dev/null
+++ b/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
+ log
+ (
+ app
+ )
+ ;
+ `;
+
+ jest
+ .spyOn(Prism, 'highlight')
+ .mockReturnValue(highlightedCode);
+
+ const { container } = render(
+
+ );
+
+ 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
+ );
+ });
+});
diff --git a/tests/unit/test.spec.ts b/tests/unit/Markdoc.spec.ts
similarity index 100%
rename from tests/unit/test.spec.ts
rename to tests/unit/Markdoc.spec.ts