tests: test custom components

__tests__/.eslintrc

@@ -1,5 +1,5 @@
 {
-  "extends": ["@readme/eslint-config/testing", "@readme/eslint-config/testing/jest"],
+  "extends": ["@readme/eslint-config/testing/jest.js", "@readme/eslint-config/testing/vitest.js"],
   "rules": {
     "testing-library/no-container": "off",
     "testing-library/no-node-access": "off"

__tests__/custom-components/index.test.tsx

@@ -0,0 +1,34 @@
+import { compile, run } from '../../index';
+import { renderToString } from 'react-dom/server';
+import React from 'react';
+
+describe('Custom Components', () => {
+  const Example = () => <div>It works!</div>;
+  const Composite = () => (
+    <>
+      <div>Does it work?</div>
+      <Example />
+    </>
+  );
+
+  it('renders custom components', () => {
+    const doc = `
+<Example />
+    `;
+    const Page = run(compile(doc), { components: { Example } });
+    const output = renderToString(<Page />);
+
+    expect(output).toBe('<div data-reactroot="">It works!</div>');
+  });
+
+  it('renders custom components recursively', () => {
+    const doc = `
+<Composite />
+    `;
+
+    const Page = run(compile(doc), { components: { Example, Composite } });
+    const output = renderToString(<Page />);
+
+    expect(output).toBe('<div>Does it work?</div><div>It works!</div>');
+  });
+});

index.tsx

@@ -39,8 +39,6 @@ export const utils = {
 const makeUseMDXComponents = (more: RunOpts['components']) => {
   const components = { ...Components, ...more };
 
-  console.log({ components });
-
   return () => components;
 };
 
@@ -55,7 +53,7 @@ export const compile = (text: string, opts = {}) => {
       providerImportSource: '#',
       remarkPlugins: [calloutTransformer],
       ...opts,
-    })
+    }),
   );
 };