Skip to content

More elegant renderHook interface. #160

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
PolarbearDK opened this issue Sep 2, 2019 · 3 comments
Closed

More elegant renderHook interface. #160

PolarbearDK opened this issue Sep 2, 2019 · 3 comments
Labels
enhancement New feature or request

Comments

@PolarbearDK
Copy link

PolarbearDK commented Sep 2, 2019

Describe the feature you'd like:

I think the renderHook interface is a bit clumbersome, especially when working with custom hooks with arguments.

Suggested implementation:

I have created a Typescript wrapper to simplify the unit testing code

// Test utilty for custom hooks with effects.
// Usage:
//       const hook = renderCustomHook(useMyHook, TypedArd1, TypeArg2, TypedArg3...);
//
// assert results from: hook.result
// use hook.rerender(typed arguments) to update hook.
export function renderCustomHook<T extends any[], R>(
  theHook: (...args: T) => R,
  ...args: T
): {
  readonly result: HookResult<R>;
  readonly waitForNextUpdate: () => Promise<void>;
  readonly unmount: () => boolean;
  readonly rerender: (...args: T) => void;
};
export function renderCustomHook(theHook: (...args: any[]) => any, ...args: any[]) {
  const hook = renderHook((param: { props: any[] }) => theHook(...param.props), {
    initialProps: { props: args },
  });
  return { ...hook, rerender: (...args: any[]) => hook.rerender({ props: args }) };
}

Describe alternatives you've considered:

Would it be possible to include something like this in the library?

@PolarbearDK PolarbearDK added the enhancement New feature or request label Sep 2, 2019
@PolarbearDK
Copy link
Author

Related to #56

@mpeyper
Copy link
Member

mpeyper commented Sep 3, 2019

I'm not particularly fond of the const hook = renderHook(someHook, arg1, arg2, arg3) interface. One of my design goals with this library is to use the hook like you would in your component. This means calling it yourself with the arguments you want ti to have.

An option I have considered would be do something like:

const testSomeHook = wrapHook(someHook)

const hook = testSomeHook(arg1, arg2, arg3)

Which is a similar concept, but feels more like just calling the function than your example.

I'm going to close this and move the suggestion to #56, just to keep them all in one place.

@PolarbearDK
Copy link
Author

Thanks. Sorry I missed the RFC post.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

2 participants