About testing rendered elements in vitest/jest

[PorcoRosso85]

Hi.
I'm researching how to unit test elements rendered by hono/jsx
How are you all accomplishing that?

In my case, for example, I may want to test that the A endpoint includes an anchor element that goes to the B or C endpoint

const CompoA = () => {
  return (
    <div>
      <h1>Endpoint A</h1>
      <p>Access Endpoint B or C using the links below:</p>
      <ul>
        <li><a href="/endpoint-b">Link to Endpoint B</a></li>
        <li><a href="/endpoint-c">Link to Endpoint C</a></li>
      </ul>
    </div>
  );
};

I'm not familiar with react, but do you guys also use testing-library when doing unit tests for hono/jsx?

import { render, screen } from '@testing-library/react';
import { describe, it, expect } from 'vitest';

describe('CompoA Component', () => {
  it('contains links to Endpoint B and Endpoint C', () => {
    render(<CompoA />);

    const linkToB = screen.getByRole('link', { name: /link to endpoint b/i });
    expect(linkToB).toBeInTheDocument();
    expect(linkToB).toHaveAttribute('href', '/endpoint-b');

    const linkToC = screen.getByRole('link', { name: /link to endpoint c/i });
    expect(linkToC).toBeInTheDocument();
    expect(linkToC).toHaveAttribute('href', '/endpoint-c');
  });
});

I have a few errors in front of me, but before I resolve them, I would like to hear from you guys in the community.
Thanks for getting back to me.

[usualoma]

Hi @PorcoRosso85,

When working with "hono/jsx", I recommend referring to https://github.com/honojs/hono/tree/main/src/jsx and following these steps for testing. It's advised not to use "@testing-library/react" in this scenario.

• Use toString() to convert to string
• Use a library that emulates the DOM, such as JSDOM

On the other hand, if you're using React instead of hono/jsx, "@testing-library/react" is the preferred option.

[PorcoRosso85]

Thanks @usualoma
Check what you tell me
and check any test of hono in repo

[PorcoRosso85]

Have a nice new year's day