Choice of the testing framework for React (BlockNote)

Cristal
1

With the recent integration of BlockNote (in React) inside of Cristal, we now need a solid test suite to ensure everything works fine across browsers and that we don’t have any regression going forward.

Given we obviously can’t use the same test tools as we do with Vue, we need to decide on a testing library for unit tests, end-to-end tests being performed with Playwright.

After some testing I’m proposing to use Playwright as well for end-to-end tests. using the components support.

Pros:

  • One single testing library for both unit and end-to-end tests
  • Avoiding introducing another, different testing library inside Cristal

Cons:

  • Components support is still experimental

I have also tried testing-library, which seems a bit more convoluted to set up and has (IMO) a less nice API:

  • Renders are done globally instead of per-instance, e.g. you don’t render your component through const component = mount(<Component />) and then interact with it, but directly call render(<Component />) and it will set a global state inside the library
  • Interactions are performed using other objects as we don’t have a component instance. As an example, simulating a click requires to use a userEvent object: await userEvent.click(screen.getByText('Load Greeting'))

These points lead me to think Playwright would be the better choice. I’ve made a PoC and it seems to work perfectly fine even with complex components.

What are your opinions on that subject?

2

Thanks!

I don’t see storybook being mentioned in you proposal.
Also, did you consider simply using vitest alone?
From what I can see:

  • it seems to work nicely based on the exemple provided in vitest documentation.
  • it’s already part of our dependencies
3

I indeed forgot to mention Storybook ; in my experience, it’s more tailored for testing the behavior of UI components than general-purpose ones (correct me if I’m wrong).

For vitest I didn’t see the part where you can use React, good catch. I’ll check if it could be a good fit for our use case too.

4

After experimenting with Vitest, it turns out that React component testing requires the vitest-browser-react package, which itself only works using Vitest’s browser mode. React testing is not compatible with the default unit test mode that works without a browser yet.

Using a browser can work in two ways: you can either use a real browser installed on your machine (which doesn’t work in CI), or you can install a puppet browser such as Playwright or WebDriverIO.

Thing is, if we need to use a puppet browser no matter what, it is IMO a better choice to directly use Playwright without introducing the additional indirection layer that is Vitest.

So I propose sticking to Playwright for React testing.

5

Thanks @ClementEXWiki,

+1 to go with playwright.