UI Kit2 unit testing jsx components

Forge
, ,
1

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

1 Like
2

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

3

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
4

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
5

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
6

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.

7

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
8

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

9

@QuocLieu Is there any update on the RTL unit test support of Forge? I couldn’t find it in the Forge Roadmap.

10

Hi @mehmetaydogdu , we have this on our internal backlog, but unfortunately don’t have firm dates for this yet.