Skip to content
Merged
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
17 changes: 17 additions & 0 deletions docs/docs/testing.md
Original file line number Diff line number Diff line change
Expand Up @@ -274,6 +274,7 @@ render(<Article article={ title: 'Foobar' } />, {
})
```
:::

### Mocking useLocation

To mock `useLocation` in your component tests, wrap the component with `LocationProvider`:
Expand All @@ -288,6 +289,22 @@ render(
)
```

### Mocking useParams

To mock `useParams` in your component tests, wrap the component with `ParamsProvider`:

```jsx
import { ParamsProvider } from '@redwoodjs/router';

render(
<ParamsProvider allParams={{ param1: 'val1', param2: 'val2' }}>
<Component />
</ParamsProvider>
)
```

The `allParams` argument accepts an object that will provide parameters as you expect them from the query parameters of a URL string. In the above example, we are assuming the URL looks like `/?param1=val1&param2=val2`.

### Queries

In most cases you will want to exclude the design elements and structure of your components from your test. Then you're free to redesign the component all you want without also having to make the same changes to your test suite. Let's look at some of the functions that React Testing Library provides (they call them "[queries](https://testing-library.com/docs/queries/about/)") that let you check for *parts* of the rendered component, rather than a full string match.
Expand Down