Hey @DanielPlatas @AaronMorris,
Really sorry for not getting back to you. UI kit doesn’t have a very good testing story at the moment. We don’t have any official recommendations here yet, although this does seem to me like a key gap to fill as UI kit aims to get out of beta. I’ll raise this with the team and product manager to see where on the roadmap it fits.
That said, I just had a play around with jest, and managed to find a set up that I was able to use to write simple unit tests for Forge UI kit components.
You will need to add a babel.config.js:
module.exports = {
presets: [
["@babel/preset-env", { targets: { node: "current" } }],
],
plugins: [
[
"@babel/plugin-transform-react-jsx",
{
pragma: "ForgeUI.createElement",
},
],
],
};
Run: npm install --save-dev jest babel-jest @babel/plugin-transform-react-jsx @babel/preset-env on the command line at the root to install the necessary dependencies.
You should then be able to write your tests and run them using jest. For example, I added a script to my package.json: "test": "jest".
Then when I wrote my index.test.js and ran npm run test, it ran the test successfully.
In order to test the UI kit component, you will need to import and use it as if it were a function. It will return a JavaScript object that represents the components it returns.
E.g.
if my index.js has:
export const App = ({ featureFlags }) => {
if (featureFlags && featureFlags.text) {
return <Text>Hello</Text>;
}
return null;
};
I can test this using:
const { App } = require("./index");
const result = App({ featureFlags: { text: true } });
// returns { type: 'Text', props: {}, children: [] };
expect(result.type).toBe("Text");
Unfortunately, to go further than one level of custom component logic, you will need to manually traverse the tree yourself (i.e. the children will contain a function with props you can then call with the props as the parameters).
The Forge team will likely need to provide some sort of @testing-library/react equivalent, but for UI kit.
- I was wondering the same, any way to test those UI kit components? 
