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