Skip to main content

Cheat Sheets & Troubleshooting

Most of the time, unit tests fail because the component is not found or is rendered asynchronously. Incorrect locators or hidden elements are common culprits. The tips below help diagnose these issues.

1. Inspect component HTML​

You may use innerHTML() to inspect the HTML of a component. This can be useful for debugging or troubleshooting.

Getting the HTML of a component can be useful to get a snapshot of the component's HTML structure and verify if it matches your expectations. However it can be overwhelming to read the HTML, so use it wisely.

const html = await testEngine.parts.myComponent.innerHTML();
console.log(html);

2. Get component runtime CSS selector​

You may use runtimeCssSelector() to get the runtime CSS selector of a component, and use it to query the DOM for the component in the browser, this is especially useful when you have a Storybook story that renders the component, which allows you to inspect the component visually in the browser.

Use of runtimeCssSelector() is helpful to troubleshoot if the locator setting is correct.

const selector = await testEngine.parts.myComponent.runtimeCssSelector();
console.log(selector);

// You can use the selector to query the DOM for the component in the browser.
document.querySelector(selector);

3. Wait for the component to be visible​

If your assertions run before the component finishes rendering, use waitUntilVisible() to pause until the part is attached and displayed.

await testEngine.parts.myComponent.waitUntilVisible();

4. Log DOM interactions​

When troubleshooting complex behaviour, a custom interactor can print every action for inspection.

LoggingInteractor.ts
import { ClickOption, PartLocator } from '@atomic-testing/core';
import { DOMInteractor } from '@atomic-testing/dom-core';

export class LoggingInteractor extends DOMInteractor {
  async click(locator: PartLocator, option?: Partial<ClickOption>): Promise<void> {
    console.log('clicking', await this.innerHTML(locator));
    await super.click(locator, option);
  }
}

Pass this interactor when creating the test engine so clicks are logged.

5. Clean up after each test​

Always unmount the component to avoid cross‑test contamination.

afterEach(async () => {
  await testEngine.cleanUp();
});