Testing > React Wrapper

[ddbradshaw]

Curious if anyone out there has an example repo that tests functional react components with the React wrapped Shoelace components embedded?

[claviska]

Hi! Is there anything specific you're struggling with, or are you just looking to get a feel for how others are doing it?

[ddbradshaw]

Both, really. I've setup an extremely simple example that I'm trying to wrap my head around. I'm curious what other do to test their react apps that have Shoelace embedded. This particular example is using @web/test-runner.

/** @jsx h */
import { expect } from 'chai';
import { h } from 'preact';
import { fireEvent, render, screen, waitFor } from '@testing-library/preact';
import Dummy from '../Dummy';

const setup = () => {
  const utils = render(<Dummy />);
  const button = utils.getByText('Click');
  return {
    button,
    ...utils,
  };
};

it('should have an button', () => {
  const { button } = setup(); // This is a Shoelace button
  expect(document.body.contains(button)); // Assertion PASS
});

it('should increment when clicked', async () => {
  const { button } = setup();
  fireEvent.click(button); // Simulate a click on the Shoelace Button
  await waitFor(() => {
    const el = screen.getByText('Count 1'); // Expect the increment
    expect(document.body.contains(el)); // Assertion FAIL
  });
});

[ddbradshaw]

Actually, I did get the above to work. I'll paste in a more complex example with input focus... this is what I'm stuck on:

it('should show hello when focused', async () => {
  const { input } = setup(); // This is a shoelace Input
  fireEvent.focus(input); // When input focused show a <div>Hello</div>
  await waitFor(() => {
    const el = screen.getByText('Hello'); 
    expect(document.body.contains(el)); // Assertion FAIL
  });
});

[ddbradshaw]

Solved with a custom event:

fireEvent(input, createEvent('sl-focus', input));