From 82aa501162b893f294aef1856180626f738cebb8 Mon Sep 17 00:00:00 2001 From: Dustin Goodman Date: Mon, 9 Oct 2023 19:17:19 -0500 Subject: [PATCH] add documentation on mocking useParams in component test --- docs/docs/testing.md | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) diff --git a/docs/docs/testing.md b/docs/docs/testing.md index 4ef02ebe3c82..a8a0fd324874 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.