Skip to content

Commit

Permalink
testing through portal (#716)
Browse files Browse the repository at this point in the history
  • Loading branch information
atk authored May 13, 2024
1 parent a568ba2 commit d468a41
Showing 1 changed file with 35 additions and 0 deletions.
35 changes: 35 additions & 0 deletions src/routes/guides/testing.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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 [`<Portal>`](/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:

<TabsCodeBlocks>
<div id="Toast.test.jsx">
```jsx frame="none"
import { test, expect } from "vitest"
import { render, screen } from "@solidjs/testing-library"
import { Toast } from './Toast'

test("increments value", async () => {
render(() => <Toast><p>This is a toast</p></Toast>)
const toast = screen.getByRole("log")
expect(toast).toHaveTextContent("This is a toast")
})
```
</div>
<div id="Toast.jsx">
```jsx frame="none"
import { Portal } from "solid-js/web";

export const Toast = (props) => {
return (
<Portal>
<div class="toast" role={props.role ?? "log"}>
{props.children}
</div>
</Portal>
);
}
```
</div>
</TabsCodeBlocks>
#### Testing in context
If a component relies on some context, to wrap it use the `wrapper` option:
Expand Down

0 comments on commit d468a41

Please sign in to comment.