How to use the test-utils.compileTemplate function in test-utils

it('should report correct the retargeted value', () => {
            let relatedTarget;
            class Root extends LightningElement {
                render() {
                    return rootHTML;
                }
                handleFocus(e) {
                    relatedTarget = e.relatedTarget;
                }
            }
            class Parent extends LightningElement {
                render() {
                    return parentHTML;
                }
            }
            const rootHTML = compileTemplate(`
                <template>
                    
                    <input>
                </template>
            `, {
                modules: { 'x-parent': Parent },
            });
            const parentHTML = compileTemplate(`
                <template>
                    <input>
                </template>
            `);
            const elm = createElement('x-root', { is: Root });
            document.body.appendChild(elm);
            elm.shadowRoot.querySelector('x-parent').shadowRoot.querySelector('input').focus();
            // jsdom has some timing issue with focusing

it('should support various types', () => {
            const html = compileTemplate(`<template></template>`);
            class VmRendering extends LightningElement {
                render() {
                    expect(api.i([], () =&gt; null)).toEqual([]);
                    expect(api.i(undefined as any, () =&gt; null)).toEqual([]);
                    expect(api.i(null as any, () =&gt; null)).toEqual([]);
                    return html;
                }
            }
            const elm = createElement('x-vm-aux', { is: VmRendering });
            document.body.appendChild(elm);
        });

it('should handle string styles', function() {
            let calledCSSText = false;

            const html = compileTemplate(
                `<template>
                    <section style="{state.customStyle}"></section>
                </template>`
            );
            class MyComponent extends LightningElement {
                state = {
                    customStyle: 'color: red',
                };

                render() {
                    return html;
                }
            }

            const elm = createElement('x-foo', { is: MyComponent });
            const cssTextPropDef = Object.getOwnPropertyDescriptor(

it('should unwrap shadow membrane object correctly', () => {
        const html = compileTemplate(`
            <template>
                <div></div>
            </template>
        `);
        class CustomEl extends LightningElement {
            query() {
                return this.template.querySelector('div');
            }
            render() {
                return html;
            }
        }
        CustomEl.publicMethods = ['query'];

        const el = createElement('x-foo', { is: CustomEl });
        document.body.appendChild(el);

it('should place the focus on the first focusable child', () => {
                const html = compileTemplate(`
                    <template>
                        <input>
                    </template>
                `);
                class Foo extends LightningElement {
                    constructor() {
                        super();
                    }
                    render() {
                        return html;
                    }
                    renderedCallback() {
                        this.template.querySelector('input').focus();
                    }
                    static delegatesFocus = true;
                }

it('should log console warning when accessing elm.childNodes', () => {
            const html = compileTemplate(`
                <template>
                    <p></p>
                </template>
            `);
            let template;
            class Parent extends LightningElement {
                render() {
                    template = this.template;
                    return html;
                }
            }
            const parentElm = createElement('x-parent', { is: Parent });
            document.body.appendChild(parentElm);
            expect(() =&gt; {
                template.querySelector('p').childNodes;
            }).toLogWarning('Discouraged access to property \'childNodes\' on \'Node\': It returns a live NodeList and should not be relied upon. Instead, use \'querySelectorAll\' which returns a static NodeList.');

it('should place the focus on the first focusable child even if it is multiple levels down', () => {
                const childHTML = compileTemplate(`
                    <template>
                        <input>
                    </template>
                `);
                class Child extends LightningElement {
                    render() {
                        return childHTML;
                    }
                    renderedCallback() {
                        this.template.querySelector('input').focus();
                    }
                }
                const parentHTML = compileTemplate(
                    `
                    <template>
                        </template>

it('should allow searching for elements from template', () => {
            const myComponentTmpl = compileTemplate(`
                <template>
                    <p></p>
                </template>
            `);
            class MyComponent extends LightningElement {
                render() {
                    return myComponentTmpl;
                }
            }

            const elm = createElement('x-foo', { is: MyComponent });
            document.body.appendChild(elm);
            return Promise.resolve().then(() =&gt; {
                const nodes = elm.shadowRoot.querySelectorAll('p');
                expect(nodes).toHaveLength(1);
            });

it('should update the attributes when replacing a styled template with a different one', () => {
        const tmpl1 = compileTemplate(`
            <template>
                <section>tmpl1</section>
            </template>
        `);
        tmpl1.stylesheets = [() =&gt; ``];
        tmpl1.stylesheetTokens = {
            hostAttribute: 'tmpl1-host',
            shadowAttribute: 'tmpl1',
        };

        const tmpl2 = compileTemplate(`
            <template>
                <section>tmpl2</section>
            </template>
        `);
        tmpl2.stylesheets = [() =&gt; ``];

it('should update the attributes when replacing a styled template with a different one', () => {
        const tmpl1 = compileTemplate(`
            <template>
                <section>tmpl1</section>
            </template>
        `);
        tmpl1.stylesheets = [() =&gt; ``];
        tmpl1.stylesheetTokens = {
            hostAttribute: 'tmpl1-host',
            shadowAttribute: 'tmpl1',
        };

        const tmpl2 = compileTemplate(`
            <template>
                <section>tmpl2</section>
            </template>
        `);
        tmpl2.stylesheets = [() =&gt; ``];
        tmpl2.stylesheetTokens = {
            hostAttribute: 'tmpl2-host',
            shadowAttribute: 'tmpl2',
        };

        class Component extends LightningElement {
            render() {
                return this.tmpl;
            }
        }
        Component.publicProps = {