UI Kit2 unit testing jsx components

Hi,

I’m developing Jira app with UI Kit 2. I have created unit tests with jest for javascript code without problems but now don’t know how to start tesing react jsx components.
I have read that official React Test Library (RTL) is the way to go, but ‘render();’ does not work from me.

Proably the reason is that UI Kit 2 applications use ForgeReconciler (code below), but I was not able to find any information what it is, or some example how to overcome it, to be able to use RTL for testing.

I would appriciate any advice that would help me how to proceed.

export const App = () => {
  return (
    <Text>
         My app
    </Text>
  );
};

ForgeReconciler.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

Thanks,
Daniel

So no help here?
Is Unit testing of jsx file possible only with CustomUI?

Hello @axldpir,
You can setup jest to run with the jsdom test environment.
Then you can then do snapshot testing.

A few links below:

3 Likes

I asked UI Kit 2 people at AtlasCamp yesterday, and they said they will provide a way to do unit test of UI Kit 2 components as part of general availability in 2024.

4 Likes

Hi @axldpir , unit testing libraries such as RTL or enzyme will not work in UI kit 2 as the component implementations itself only exists within products (such as Jira or Confluence). Because of this, UI Kit 2 components can’t be rendered locally for testing purposes. The ForgeReconciler works by converting your JSX code to a JSON object and sends it to the product to be rendered. As for the time being, @FabienLydoire suggestion of snapshot testing will work, but we do understand that it’s not a complete replacement for standard unit tests. The team intends on providing unit test support down the line after GA

2 Likes

Thank you for your help and answers.

It looks like I will need to switch to CustomUI anyway, sooner or later, since UI Kit 2 has limitations. Is it possible to implement classic unit test (so not just snapshot testing) with Custom UI then?
I was not able to find the confirmation or example of this either.

Yes as Custom UI is simply serving your app bundle in an iframe, you’ll be free to use any unit test libraries that works with your app.

1 Like

Thanks!
Started rewriting my app bases on examples, but encountered another problem, if anyone can help.