Version: Next

TechDocsAddonTester.renderWithEffects()

Home > @backstage/plugin-techdocs-addons-test-utils > TechDocsAddonTester > renderWithEffects

Render the Addon within a fully configured and mocked TechDocs reader.

Signature:

renderWithEffects(): Promise<{
        shadowRoot: ShadowRoot | null;
    }>;

Returns:

Promise<{ shadowRoot: ShadowRoot | null; }>

Remarks

Note that to make assertions on the shadow dom, add a dependency on [the shadow-dom-testing-library package](https://github.com/konnorrogers/shadow-dom-testing-library/) and use its screen as follows:

import { screen } from 'shadow-dom-testing-library';

// ... render the addon ...
await TechDocsAddonTester.buildAddonsInTechDocs([<AnAddon />])
  .withDom(<body>TEST_CONTENT</body>)
  .renderWithEffects();

expect(screen.getByShadowText('TEST_CONTENT')).toBeInTheDocument();

For items outside of the shadow dom, you can still use the regular screen from @testing-library/react.

Components using useEffect to perform an asynchronous action (such as fetch) must be rendered within an async act call to properly get the final state, even with mocked responses. This utility method makes the signature a bit cleaner, since act doesn't return the result of the evaluated function.

Remarks​

Remarks