Restore old createRemixStub API to facilitate passing props to the components we want to test

[janhesters]

The new createRemixStub API looks something like this:

const RemixStub = createRemixStub([{ path, Component: NotFoundComponent }]);

The old one looked like this:

const RemixStub = createRemixStub([{ path, element: <NotFoundComponent /> }]);

The main problem is, that this new API makes it hard to pass props to the component we're testing.

With the old API, you could just put it in the JSX.

With the new API, you'll have to do something like this:

const RemixStub = createRemixStub([
  { path, Component: props => <NotFoundComponent {...props} myProp="propWeWantToPass" /> },
]);

Since one of the main uses cases of createRemixStub is to test full stack components, which might take in props, and that old API made that more convenient, it would be dope to revert the API change 🙏

[sergiodxa]

The use case for createRemixStub is not to test Kent's full stack components, but to test route components, and route components doesn't receive props in Remix because you don't render them.

[ALEIMBACH-STR]

Hi @sergiodxa 👋 !

Quick follow up question... I was looking at some the motivation behind createRemixStub, and it states that one of the problems it was trying to address was:

It's common for a reusable component to render a <Link> inside of it...

I bring that discussion up because I'm trying to test a reusable component (not a route component) with a <Link to={/users/${id}}> inside of it (id passed through props), and when I look for the error I get (useHref() may be used only in the context of a <Router> component), that discussion is one of the first results that I get. I also looked through requests for similar help in the discord, and unfortunately they are Still unanswered (eg1, eg2).

With all that being said, how does Remix recommend to test reusable components that use, for example, <Link>? Or, is it incorrect altogether to have reusable components that import Remix components?

edit: I realize I may have incorrectly assumed that using createRemixStub would fix my issue, and from that angle my comment feels a bit out of place... sorry about that but would appreciate pointers if this gets to you.

[janhesters]

Well, wouldn't it make sense to have a utility to test components then? createRemixStub could easily be both, by changing the API back 🤗

[kiliman]

Components that use Remix hooks must be rendered inside a route context. So it makes sense to require a prop-less component since that's what the default export is.

As you noted, testing reusable components is as simple as:

const Component = (props) => <MyComponent {...props} someProp={value} />
const RemixStub = createRemixStub[{ path, Component }]

If you want to test any other type of component, then use any of the tools from RTL.