sterile badger
What's the recommended way to unit test a component which itself renders another component which uses React Router's (v6) useFetcher() hook?
Using:
it('tests my component', () => {
const { getByTestId } = render(<Example data-testid="c03" name="test" />);
const element = getByTestId('c03');
expect(element).toBeDefined();
});
...results in an error:
Error: Uncaught [Error: useFetcher must be used within a data router. See https://reactrouter.com/routers/picking-a-router.]
when i visit that page, i'm directed to choose a compatible router instance. if i select createMemoryRouter() i see an example of a router instance being created and a full page / route being rendered within a single test.
my question is: do i really have to wire up an entire route instance just to render what ultimately is just a single block of text with a link embedded in it?
the component i'm trying to test is like 6 layers removed from anything related to routing - is there no simpler way to just render a component that happens to include useFetcher() and assert against the resulting html? as it is, i'm going to have to render all this extraneous stuff just to get my component output.
tall heron