feat(testing-helpers): Allow configuring of render function (#2412)

Author: thepassle

Diff for: .changeset/selfish-wombats-chew.md

@@ -0,0 +1,6 @@
+---
+"@open-wc/testing-helpers": minor
+"@open-wc/testing": minor
+---
+
+Feat/customize render

Diff for: docs/docs/testing/helpers.md

@@ -127,6 +127,16 @@ const el = await fixture(html` <my-el></my-el> `, { parentNode });
 <div style="position:absolute;"><my-el></my-el></div>
 ```
 
+## Customize the render function
+
+It could be the case that you need to customize the render function for compatibility reasons, for example if you have multiple versions of lit-html throughout your project. You can achieve this like so:
+
+```js
+import { render } from 'custom-lit-html-version';
+
+const el = await fixture(html`<my-el></my-el>`, { render });
+```
+
 ## Timings
 
 By default fixture awaits the elements "update complete" Promise.

Diff for: packages/testing-helpers/src/fixture-no-side-effect.js

@@ -4,6 +4,7 @@ import { isValidRenderArg } from './lib.js';
 
 /**
  * @typedef {object} FixtureOptions
+ * @property {*} [render] optional render function to use
  * @property {Element} [parentNode] optional parent node to render the fixture's template to
  * @property {import('@open-wc/scoped-elements').ScopedElementsMap} [scopedElements] optional scoped-elements
  * definition map
@@ -24,7 +25,7 @@ export function fixtureSync(template, options) {
   if (typeof template === 'string') {
     return stringFixtureSync(template, options);
   }
-  if (isValidRenderArg(template)) {
+  if (!!options?.render || isValidRenderArg(template)) {
     return litFixtureSync(template, options);
   }
   throw new Error(
@@ -57,7 +58,7 @@ export async function fixture(template, options) {
   if (typeof template === 'string') {
     return stringFixture(template, options);
   }
-  if (isValidRenderArg(template)) {
+  if (!!options?.render || isValidRenderArg(template)) {
     return litFixture(template, options);
   }
   throw new Error('Invalid template provided - string or lit-html TemplateResult is supported');

Diff for: packages/testing-helpers/src/litFixture.js

@@ -1,4 +1,4 @@
-import { render } from 'lit/html.js';
+import { render as defaultRender } from 'lit/html.js';
 import { isTemplateResult } from 'lit/directive-helpers.js';
 import { fixtureWrapper } from './fixtureWrapper.js';
 import { elementUpdated } from './elementUpdated.js';
@@ -26,6 +26,7 @@ const isUsefulNode = ({ nodeType, textContent }) => {
  */
 export function litFixtureSync(template, options = {}, getScopedElementsTemplate) {
   const wrapper = /** @type {HTMLElement} */ (fixtureWrapper(options.parentNode));
+  const render = options.render ?? defaultRender;
 
   render(
     options.scopedElements ? getScopedElementsTemplate(template, options.scopedElements) : template,

Diff for: packages/testing-helpers/test-web/fixture.test.js

@@ -63,6 +63,12 @@ describe('fixtureSync & fixture', () => {
     testElement(elementAsync);
   });
 
+  it('supports customized render functions', async () => {
+    const render = sinon.stub();
+    await fixture(html`<div></div>`, { render });
+    expect(render.called).to.equal(true);
+  });
+
   it('supports lit-html TemplateResult with whitespace', async () => {
     /**
      * @param {Element} element