Skip to content

chore: add readme components tests#1434

Merged
eaglethrost merged 14 commits into
nextfrom
dimas/readme-component-tests
Apr 17, 2026
Merged

chore: add readme components tests#1434
eaglethrost merged 14 commits into
nextfrom
dimas/readme-component-tests

Conversation

@eaglethrost

@eaglethrost eaglethrost commented Apr 13, 2026

Copy link
Copy Markdown
Contributor
🎫 Resolve ISSUE_ID

🎯 What does this PR do?

Increased test coverage for the readme components & added testing for both the mdx & mdxish rendering engine. This is to better catch potential regressions from changes, and also ensure mdx & mdxish outputs are consistent with each other. This copies some tests from Falco's old PR in #1354

  • Added a test pattern where the same input should be rendered with all the rendering engines, utilising snapshots for some tests
  • Created a customComponents fixture to help with MDX component tests

🧪 QA tips

Every new test should pass

Comment thread example/Doc.tsx

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Quick chore to actually pass in components to Xish

@eaglethrost eaglethrost requested a review from kevinports April 14, 2026 13:53
@eaglethrost eaglethrost marked this pull request as ready for review April 14, 2026 13:53

@maximilianfalco maximilianfalco left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

lgtm! can we also do a coverage test just so we dont miss anything

import { mdxish, renderMdxish } from '../../lib';
import { execute } from '../helpers';

export const renderingEngines = [

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nice

Comment thread __tests__/components/Code.test.tsx Outdated
expect(container.textContent).toContain('console.log()');
});
});
}); No newline at end of file

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
});
});

Comment thread __tests__/components/Cards.test.tsx Outdated
expect(container).toMatchSnapshot();
});
});
}); No newline at end of file

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
});
});

@kevinports kevinports left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Saw a few minor things. But nice improvement!

@@ -1,34 +1,41 @@
import type { Element } from 'hast';

import '@testing-library/jest-dom/vitest';

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do we need this import here?

Comment thread __tests__/components/Callout.test.tsx Outdated
});

describe('mdxish-specific behaviours', () => {
it('should correctly parse content when', () => {

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Did the description here get cut short? "should correctly parse content when"

When what?

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah sorry silly mistake from me, updated this!

import { render, screen } from '@testing-library/react';
import React from 'react';

import { expect } from 'vitest';

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think expect is available globally with vitest and we don't need to actually import it here.

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sorry I should have explained earlier. I think typescript checks the global expect from jest and not vitest's and I was getting type errors in some expect methods. Even though it's actually fine to run, because as you said vitest is available, it only injects its expect at runtime, so it runs but typescript doesn't see it. There's a bit of difference in the expect of jest & vitest, some methods we use here are not available in jest. Hence, I explicitly imported the vitest types with the import '@testing-library/jest-dom/vitest'; and the expect to fix the errors

@eaglethrost eaglethrost merged commit 72ea080 into next Apr 17, 2026
7 checks passed
@eaglethrost eaglethrost deleted the dimas/readme-component-tests branch April 17, 2026 01:20
rafegoldberg pushed a commit that referenced this pull request Apr 22, 2026
## Version 14.1.0
### ⚠ BREAKING CHANGES

* **mdxish:** AST nodes
- We can't just use safeMode because we still need the inline
expressions to be parsed as expression nodes, so there still needs to be
an expression parsing

## 🎯 What does this PR do?

### ✨ New & Improved

* **mdxish:** remove jsx attribute expression preprocessing ([#1429](#1429)) ([9545472](9545472)), closes [#1426](#1426)

### 🛠 Fixes & Updates

* add readme components tests ([#1434](#1434)) ([72ea080](72ea080)), closes [#1354](#1354)
* **deps:** bump actions/upload-artifact from 5 to 7 ([#1417](#1417)) ([3ca6d32](3ca6d32))
* **mdxish:** legacy glossary syntax in callout title crashing ([#1441](#1441)) ([9d1b18b](9d1b18b))

<!--SKIP CI-->
@rafegoldberg

Copy link
Copy Markdown
Collaborator

This PR was released!

🚀 Changes included in v14.1.0

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants