Skip to content
This repository has been archived by the owner on Oct 1, 2024. It is now read-only.

Add generics to findWhere and findWhereAll in react-testing #1999

Merged
merged 4 commits into from
Aug 12, 2021

Conversation

BPScott
Copy link
Member

@BPScott BPScott commented Aug 12, 2021

Description

findWhere and findAllWhere previously always returned Element<unknown> which meant that code didn't know the type of the element returned And thus you got TS errors (forgive this trivial example, where using find would be preferred):

const wrapper = mount(<div><form method="GET">Hello</form></div>);

const form = wrapper.findWhere((node) => node.is('form'))!;
// This line is a type error because form is typed as `Element<unknown>` 
// which means that the prop (and trigger etc) methods do not know the
// props present on the element so it claims the `method` prop does not exist
const method = form.prop('method');

This PR adds a generic type to findWhere and findAllWhere` so that you can specify the type of element that you shall be returning.

const wrapper = mount(<div><form method="GET">Hello</form></div>);

const form = wrapper.findWhere<'form'>((node) => node.is('form'))!;
// form is now typed an Element with the props of a form element, which
// means that this line now passes
const method = form.prop('method');

This generic type is either a string referring to a html element ('div', 'form' etc), or a React component (Card etc). This is the same type as what you can pass into find as it's first argument.

Type of change

  • react-testing: minor

@BPScott BPScott requested a review from a team August 12, 2021 19:10
function Wrapper() {
return (
<>
<MyComponent name="Michelle" />
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

😅

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The find docs reference you and Gord, I'm just being consistent :p

(node) => node.is(MyComponent) && node.prop('name').startsWith('M'),
);

const startsWithG = wrapper.findWhere<MyComponent>(
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I am actually a little surprise its wrapper.findWhere<MyComponent> and not wrapper.findWhere<type of MyComponent>, the new version of TS got smarter again?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Excellent spot, the typeof totally needs to be there

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

lol it would be so nice if typescript is smart enough in the future to know it should use the typeof in generic

Copy link
Contributor

@michenly michenly left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🎩 locally with Ben and it looks good to me!

@BPScott BPScott merged commit c27291a into main Aug 12, 2021
@BPScott BPScott deleted the findWhere-generics branch August 12, 2021 23:07
@BPScott BPScott mentioned this pull request Sep 10, 2021
12 tasks
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants