Add renderLit to render-component

README.md

@@ -455,6 +455,8 @@ First, import `render` from `riteway/render-component`:
 
 ```js
 import render from 'riteway/render-component';
+// or you can also use renderReact (which is the same as the default export)
+import { renderReact } from 'riteway/render-component';
 ```
 
 ```js
@@ -478,6 +480,35 @@ describe('MyComponent', async assert => {
 });
 ```
 
+### Render Lit
+
+To use this, import `renderLit` from `riteway/render-component`:
+
+```js
+import { renderLit } from 'riteway/render-component';
+```
+
+```js
+renderLit = (TemplateResult) => CheerioObject
+```
+
+Take a [TemplateResult](https://lit.dev/docs/v1/api/lit-html/templates/#TemplateResult) Lit type and returns a [Cheerio object](https://cheerio.js.org/), that can be used in the exact same way as aforementioned default `render` function which is specifically for React.
+
+#### Example
+
+```js
+describe('MyComponent', async assert => {
+  const $ = renderLit(html`<div>Test</div>`);
+
+  assert({
+    given: 'no params',
+    should: 'render something with the my-component class',
+    actual: $('.my-component').length,
+    expected: 1
+  });
+});
+```
+
 
 ## Match
 

esm/test.js

@@ -142,6 +142,26 @@ describe('skip()', async assert => {
   });
 }
 
+{
+  // @ts-ignore
+  // eslint-disable-next-line
+
+  describe('renderLitComponent', async assert => {
+    const { html } = await import('lit');
+
+    const text = 'Test for whatever you like!';
+    const $ = renderLit(html`<div>Text</div>`);
+    const contains = match($('.contents').html());
+
+    assert({
+      given: 'A lit component',
+      should: 'return a working cheerio instance',
+      actual: contains(text),
+      expected: text
+    });
+  });
+}
+
 describe('countKeys()', async assert => {
   assert({
     given: 'an object',
@@ -151,4 +171,5 @@ describe('countKeys()', async assert => {
   });
 });
 
-import './match-test';
+import './match-test';import { renderLit } from '../source/render-component';
+

package.json

@@ -68,8 +68,10 @@
     "watch": "^0.13.0"
   },
   "dependencies": {
+    "@open-wc/testing-helpers": "^3.0.1",
     "cheerio": "1.0.0-rc.12",
     "esm": "3.2.25",
+    "lit": "^3.1.3",
     "react-dom": "18.2.0",
     "tape": "^5.7.4",
     "vitest": "^1.2.1"

render-component.d.ts

@@ -1,6 +1,11 @@
 /// <reference types="cheerio" />
 /// <reference types="react" />
+/// <reference types="lit" />
+
+import { TemplateResult } from "lit";
 
 declare module 'riteway/render-component' {
+  export function renderLit(el: TemplateResult): cheerio.Root;
+  export function renderReact(el: JSX.Element): cheerio.Root;
   export default function render(el: JSX.Element): cheerio.Root;
 }

source/render-component.js

@@ -1,8 +1,18 @@
 import reactDom from 'react-dom/server';
 import dom from 'cheerio';
+// import { fixture } from '@open-wc/testing-helpers';
+// import { html } from 'lit';
 
-const render = component =>
-  dom.load(reactDom.renderToStaticMarkup(component));
+// export const renderLit = async (template) => {
+//   const el = await fixture(html`${template}`);
+//   await el.updateComplete; // Wait for the component to finish rendering
+//   if (el.shadowRoot) {
+//     return dom.load(el.shadowRoot.innerHTML);
+//   }
+//   return dom.load(el.innerHTML);
+// };
 
-export default render;
+export const renderReact = (component) =>
+  dom.load(reactDom.renderToStaticMarkup(component));
 
+export default renderReact;

source/test.js

@@ -3,7 +3,7 @@ import tape from 'tape';
 
 import { describe, Try, createStream, countKeys } from './riteway';
 import match from './match';
-import render from './render-component';
+import render, { renderReact } from './render-component';
 
 // a function to test
 const sum = (...args) => {
@@ -128,7 +128,20 @@ describe('skip()', async assert => {
   // eslint-disable-next-line
   const MyComponent = ({text}) => <div className="contents">{text}</div>;
 
-  describe('renderComponent', async assert => {
+  describe('renderComponent: renderRecat', async assert => {
+    const text = 'Test for whatever you like!';
+    const $ = renderReact(<MyComponent text={ text }/>);
+    const contains = match($('.contents').html());
+
+    assert({
+      given: 'A react component',
+      should: 'return a working cheerio instance',
+      actual: contains(text),
+      expected: text
+    });
+  });
+
+  describe('renderComponent: default export', async assert => {
     const text = 'Test for whatever you like!';
     const $ = render(<MyComponent text={ text }/>);
     const contains = match($('.contents').html());