Testing components

Issues with Mocha

We're aware of some issues around testing the components with Mocha. For the time being, we advise using one of the testing frameworks we provide guidance on.

How we've built the components

Typically, components sit in the DOM, also known as the 'light DOM' . DOM stands for 'Document Object Model'. The light DOM represents the structure of a webpage as a tree, where each DOM object is a node.

At the core, the UI Kit components are based off the web components specification, which utilises the shadow DOM. This makes it possible to encapsulate each component’s markup structure, styling and functionality.

According to Mozilla , the "shadow DOM allows hidden DOM trees to be attached to elements in the regular DOM tree — this shadow DOM tree starts with a shadow root, underneath which you can attach any element, in the same way as the normal DOM."

Therefore, testing components within the shadow DOM can be problematic because elements inside a shadow root technically do not exist in the main DOM, and can prevent testing frameworks from selecting internal elements.

Testing the components

To ease the process of testing, here are guides to testing our UI Kit components in different testing frameworks.

Last reviewed 25 June 2024 .