diff --git a/docs/docs/testing.md b/docs/docs/testing.md index 901c8476c47e..4f6d1fa4ee99 100644 --- a/docs/docs/testing.md +++ b/docs/docs/testing.md @@ -274,6 +274,7 @@ render(
, { }) ``` ::: + ### Mocking useLocation To mock `useLocation` in your component tests, wrap the component with `LocationProvider`: @@ -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( + + + +) +``` + +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¶m2=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.