Has any one gotten @marko/testing-library to work with vitetest?

Question

I have a project in Vite, Fastify and Marko and am trying to use Vitest.

I want to test individual components/templates. Say pass in inputs (props) and test if the output (typically HTML) is as expected.

The Marko Testing Library supplies this but currently, with Vitest, it does not recognize the inputs. It returns an error when trying to "render" the template, saying:

TypeError: Cannot read properties of undefined (reading 'session')
 ❯ _marko_template._.__vite_ssr_import_4__.default.t src/components/menu-main/menu-main.marko:13:16
     11|     </li>
     12|     <li>
     13|       <if(input.session.firebaseAuthenticated)>
       |                ^
     14|         ${ input.session.displayName} <a href="/logout">Logout</a>
     15|       </if>
 ❯ renderer node_modules/marko/dist/runtime/components/renderer.js:218:5
 ❯ proxyRenderer node_modules/marko/dist/runtime/vdom/hot-reload.js:73:21
 ❯ Proxy.renderTagHelper node_modules/marko/dist/runtime/helpers/render-tag.js:15:77
 ❯ _marko_template._.__vite_ssr_import_5__.default.t src/components/menu-main/menu-main.marko?marko-server-entry:8:3
 ❯ renderer node_modules/marko/dist/runtime/components/renderer.js:218:5
 ❯ proxyRenderer node_modules/marko/dist/runtime/vdom/hot-reload.js:73:21
 ❯ safeRender node_modules/marko/dist/runtime/renderable.js:7:5
 ❯ Template.render node_modules/marko/dist/runtime/renderable.js:139:14
 ❯ renderResult node_modules/@marko/testing-library/dist/cjs/index-browser.js:59:72
 ❯ Proxy.render node_modules/@marko/testing-library/dist/cjs/index-browser.js:59:30
 ❯ src/components/menu-main/menu-main.test.js:8:30

If, in the template, I check "all the way up the chain" (as I should) in my conditional this error goes away.

<if(input?.session?.isXYZ)>
    <a ...>Log Out</a>
</if>
<else>
    <a ...>Log In</a>
</else>

But of course I am very explicitly (trying) to pass in input.session.isXYZ as true.

In any case, then the error changes to:

TypeError: Cannot read properties of undefined (reading 'id')
 ❯ morphChildren node_modules/marko/dist/runtime/vdom/morphdom/index.js:269:41
 ❯ morphdom node_modules/marko/dist/runtime/vdom/morphdom/index.js:684:3
 ❯ AsyncVDOMBuilder.B_ node_modules/marko/dist/runtime/vdom/AsyncVDOMBuilder.js:394:7
 ❯ RenderResult.getNode node_modules/marko/dist/runtime/RenderResult.js:61:20
 ❯ getEl node_modules/marko/dist/runtime/RenderResult.js:106:23
 ❯ RenderResult.appendTo node_modules/marko/dist/runtime/dom-insert.js:31:16
 ❯ Proxy.render node_modules/@marko/testing-library/dist/cjs/index-browser.js:61:33
 ❯ async /home/ee/code/dibbs/dibbs-marko/src/components/menu-main/menu-main.test.js:11:25

But there is no reference to id in that component.

Even if I make the component just <div></div> I get this id error. I assume it must be looking beyond the component/template I imported into my test script and am trying to test on.

I can look at node_modules/marko/dist/runtime/vdom/morphdom/index.js:269:41 etc of course but before I go down that rabbit hole, I wanted to ask here. Any ideas?

The testing Script:

import { render } from "@marko/testing-library";
import template from "./menu-main.marko";
import { test } from 'vitest'


test('login menu item shows correct state', async (ctx) => {

  const { container } = await render(template, {
      session: {
        firebaseAuthenticated: false,
      }
  });

  expect(container).stringContaining("Log In");

})

Has any one gotten @marko/testing-library to work with vitetest?

0 Answers0