Test

Test your MDXLD applications with built-in testing tools and coverage reporting.

Running Tests

Run all tests:

mdxe test

Run with coverage:

mdxe test --coverage

Watch mode:

mdxe test --watch

Test Structure

Testing MDX Documents

Test that your MDX documents parse correctly and have valid frontmatter:

import { parse, validate } from 'mdxld'

describe('BlogPost', () => {
  it('should parse valid blog post', () => {
    const mdx = `
---
$type: BlogPost
title: Test Post
author: Jane Doe
---

# Test Post
    `
    
    const doc = parse(mdx)
    expect(doc.data.$type).toBe('BlogPost')
    expect(doc.data.title).toBe('Test Post')
  })

  it('should validate required fields', () => {
    const doc = parse(mdx)
    const result = validate(doc, {
      $type: 'BlogPost',
      required: ['title', 'author']
    })
    
    expect(result.valid).toBe(true)
  })
})

Testing Components

Test that your MDX components render correctly:

import { render } from '@testing-library/react'
import { BlogPost } from 'mdxui'

describe('BlogPost Component', () => {
  it('should render blog post', () => {
    const { getByText } = render(
      <BlogPost
        title="Test Post"
        author="Jane Doe"
        content="# Test Post"
      />
    )
    
    expect(getByText('Test Post')).toBeInTheDocument()
    expect(getByText('By Jane Doe')).toBeInTheDocument()
  })
})

Testing Database Operations

Test MDX database queries:

import { list, search, get } from 'mdxdb'

describe('mdxdb', () => {
  it('should list documents by type', async () => {
    const posts = await list({ type: 'BlogPost' })
    expect(posts.length).toBeGreaterThan(0)
    expect(posts[0].$type).toBe('BlogPost')
  })

  it('should search content', async () => {
    const results = await search('TypeScript')
    expect(results.length).toBeGreaterThan(0)
    expect(results[0].score).toBeGreaterThan(0)
  })

  it('should get document by id', async () => {
    const doc = await get('/blog/test-post')
    expect(doc).toBeDefined()
    expect(doc.$id).toBe('/blog/test-post')
  })
})

Coverage Reports

Generate coverage reports:

mdxe test --coverage

This generates coverage for:

Line coverage
Function coverage
Branch coverage
Statement coverage

View the coverage report:

open coverage/index.html

Test Configuration

Pattern Matching

Test specific files:

mdxe test --pattern "**/*.test.ts"

Timeout

Set test timeout:

mdxe test --timeout 5000

Reporter

Choose reporter format:

mdxe test --reporter verbose
mdxe test --reporter json

Continuous Integration

GitHub Actions

name: Test
on: [push, pull_request]

jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: pnpm/action-setup@v2
      - uses: actions/setup-node@v3
        with:
          node-version: 20
          cache: pnpm
      - run: pnpm install
      - run: pnpm test --coverage
      - uses: codecov/codecov-action@v3

Snapshot Testing

Test MDX output with snapshots:

import { parse, stringify } from 'mdxld'

it('should match snapshot', () => {
  const doc = parse(mdx)
  const output = stringify(doc)
  expect(output).toMatchSnapshot()
})

Best Practices

Test Parse + Validate: Always test both parsing and validation
Test Type Discrimination: Verify $type discriminates correctly
Test Error Cases: Test invalid frontmatter and malformed MDX
Test Components: Test all MDX component variants
Test Database Queries: Test filtering, sorting, and pagination
Use Coverage: Aim for 80%+ coverage on critical paths

Test

On this page