Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions docs/dom-testing-library/example-intro.md
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ import {
queryByTestId,
// Tip: all queries are also exposed on an object
// called "queries" which you could import here as well
wait,
waitFor,
} from '@testing-library/dom'
// adds special assertions like toHaveTextContent
import '@testing-library/jest-dom/extend-expect'
Expand Down Expand Up @@ -57,7 +57,7 @@ test('examples of some things', async () => {
// Get elements by their text, just like a real user does.
getByText(container, 'Print Username').click()

await wait(() =>
await waitFor(() =>
expect(queryByTestId(container, 'printed-username')).toBeTruthy()
)

Expand Down
18 changes: 11 additions & 7 deletions docs/example-react-router.md
Original file line number Diff line number Diff line change
Expand Up @@ -87,20 +87,23 @@ test('rendering a component that uses withRouter', () => {

## Reducing boilerplate

1. You can use the `wrapper` option to wrap a `MemoryRouter` around the component you want to render (`MemoryRouter` works when you don't need access to the history object itself in the test, but just need the components to be able to render and navigate).
1. You can use the `wrapper` option to wrap a `MemoryRouter` around the
component you want to render (`MemoryRouter` works when you don't need access
to the history object itself in the test, but just need the components to be
able to render and navigate).

```jsx
import { MemoryRouter } from 'react-router-dom'

test('full app rendering/navigating', () => {
const { container, getByText } = render(<App />, {wrapper: MemoryRouter})
const { container, getByText } = render(<App />, { wrapper: MemoryRouter })
// verify page content for expected route
expect(getByRole('heading')).toMatch('Home')
})
```

2. If you find yourself adding Router components to your tests a lot, you may want to create
a helper function that wraps around `render`.
2. If you find yourself adding Router components to your tests a lot, you may
want to create a helper function that wraps around `render`.

```jsx
// test utils file
Expand All @@ -111,9 +114,11 @@ function renderWithRouter(
history = createMemoryHistory({ initialEntries: [route] }),
} = {}
) {
const Wrapper = ({children}) => <Router history={history}>{children}</Router>
const Wrapper = ({ children }) => (
<Router history={history}>{children}</Router>
)
return {
...render(ui, {wrapper: Wrapper}),
...render(ui, { wrapper: Wrapper }),
// adding `history` to the returned utilities to allow us
// to reference it in our tests (just try to avoid using
// this to test implementation details).
Expand All @@ -137,4 +142,3 @@ test('rendering a component that uses withRouter', () => {
expect(getByTestId('location-display')).toHaveTextContent(route)
})
```

2 changes: 1 addition & 1 deletion docs/pptr-testing-library/intro.md
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ const $email = await getByLabelText($form, 'Email')
// interact with puppeteer like usual
await $email.type('pptr@example.com')
// waiting works too!
await wait(() => getByText('Loading...'))
await waitFor(() => getByText('Loading...'))
```

A little too un-puppeteer for you? You can attach all the `DOM Testing Library`
Expand Down