Skip to content

Commit

Permalink
add documentation on mocking useParams in component test
Browse files Browse the repository at this point in the history
  • Loading branch information
Dustin Goodman committed Oct 10, 2023
1 parent 229bd4b commit 82aa501
Showing 1 changed file with 17 additions and 0 deletions.
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

0 comments on commit 82aa501

Please sign in to comment.