diff --git a/src/routes/guides/testing.mdx b/src/routes/guides/testing.mdx index e834691bb..661499c88 100644 --- a/src/routes/guides/testing.mdx +++ b/src/routes/guides/testing.mdx @@ -239,6 +239,41 @@ If possible, try to select for accessible attributes (roughly in the following o For more information, check the [testing-library documentation](https://testing-library.com/docs/queries/about). +#### Testing through Portal + +Solid allows components to break through the DOM tree structure using [``](/reference/components/portal). This mechanism will still work in testing, so the content of the portals will break out of the testing container. In order to test this content, make sure to use the `screen` export to query the contents: + + +
+```jsx frame="none" +import { test, expect } from "vitest" +import { render, screen } from "@solidjs/testing-library" +import { Toast } from './Toast' + +test("increments value", async () => { + render(() =>

This is a toast

) + const toast = screen.getByRole("log") + expect(toast).toHaveTextContent("This is a toast") +}) +``` +
+
+```jsx frame="none" +import { Portal } from "solid-js/web"; + +export const Toast = (props) => { + return ( + +
+ {props.children} +
+
+ ); +} +``` +
+
+ #### Testing in context If a component relies on some context, to wrap it use the `wrapper` option: