[TS] Migrate tests to .tsx

Overview and Motivation

This is a ticket to aid the migration of *.js tests to *.tsx. The general motivation here is to improve TypeScript support in Grommet so that when type checks fail, so do unit tests. For more details about why and how we are doing this, please refer to the related Issues and PRs below.

Related Issues and PRs

Addition of TS unit testing support:

Issue: #5111
PR: #5589

Contributing

Since we have close to 75 components now and the tests for each range from simple to quite complex, It makes sense to migrate a single component at a time to *.tsx files, taking a test-driven development (TDD) approach.

Pick a single component at a time to work on test migrations for.
Create a draft PR while you work on the components tests. Mention this issue in the PR to make sure multiple people don’t double up on a single component.
Rename the tests for that component from *-test.js to *-test.tsx
Rename the *-test.js.snap files for that component to *-test.tsx.snap
Run the test suite for that component with yarn test. No test snapshots should fail, but some tests might fail due to type check failures.
If migrating tests causes only a few Typescript errors (e.g. missing field on prop types), feel free to fix those issues in the same PR as the test migration including the test failure and an explanation about how the changes fix the test failure. If there are a lot of new errors, create separate issues for each error and fix them in a separate PR. Update the test migration branch with these changes until the tests pass.

Roadmap

Test migration completed for:

Accordion #5609
AccordionPanel #5610
Anchor #5600
Avatar #5602
Box #5611
Button #5645
Calendar #5656
Card #5612
~~CardBody~~ No tests to migrate
~~CardFooter~~ No tests to migrate
~~CardHeader~~ No tests to migrate
Carousel #5643
Chart https://github.com/grommet/grommet/pull/6192
CheckBox #5644
CheckBoxGroup #5653
Clock #5655
Collapsible #5686
DataChart #6377
DataTable
DateInput #5696
Diagram #5759
Distribution #6378
Drop #5714
DropButton #6379
FileInput #5696
Footer #5703
Form
FormField
Grid
Grommet
Header #5701
Heading #5723
Image #5704
InfiniteScroll #5718
Keyboard #5748
Layer
List
Main #5685
Markdown
MaskedInput
Menu
Meter #5690
NameValueList #5626
NameValuePair #5626
Nav #5719
Notification
Page #5960
~~PageContent~~ No tests to migrate
PageHeader #6071
Pagination #5722
Paragraph #5724
RadioButton #5720
RadioButtonGroup #5721
RangeInput #5690
RangeSelector
~~RoutedAnchor~~ Deprecated
~~RoutedButton~~ Deprecated
Select
SelectMultiple #6725
Sidebar #6382
~~SkipLink~~ No tests to migrate
SkipLinks
~~SkipLinkTarget~~ No tests to migrate
Spinner #5702
Stack #5743
~~Tab~~ No tests to migrate
Table #5746
~~TableBody~~ No tests to migrate
~~TableCell~~ No tests to migrate
~~TableFooter~~ No tests to migrate
~~TableHeader~~ No tests to migrate
~~TableRow~~ No tests to migrate
Tabs #5659 #5732
Tag #5778
Text #5725
TextArea #6381
TextInput #5749
Tip #5763
Video #6380
WorldMap #5654

Issue Analytics

State:
Created 2 years ago
Comments:7 (4 by maintainers)

Top GitHub Comments

1reaction

alexmirringtoncommented, Oct 23, 2021

@haysclark I updated it on Wednesday but everyone’s been getting their PRs in for Hacktoberfest since then by the looks of it! Can’t believe we’re over halfway done already! Cheers @jcfilben for updating the ticket 😃

1reaction

jcfilbencommented, Sep 21, 2021

I am leaning towards just keeping tests under the parent component

Top Results From Across the Web

ts-migrate: A Tool for Migrating to TypeScript at Scale - Medium

To be able to iterate quickly and prevent regressions, we added a series of unit tests for each plugin and ts-migrate.

Introduce TypeScript to react(js) project with ts-migrate - DEV ...

Introduce TypeScript to react(js) project with ts-migrate · Create a new branch · Install ts-migrate · Run ts-migrate · Install typescript and @ ......

Documentation - Migrating from JavaScript - TypeScript

During our JS to TS migration, we'll need to separate our input files to prevent TypeScript from overwriting them. If your output files...

"Automatically Migrating to TypeScript with ts ... - YouTube

(Evan Shaw) Learn about ts - migrate, an open source tool to automate the process of converting a JavaScript code base to TypeScript....

10 Strategies for migrating to TypeScript - Exploring JS

For large projects, there may be too many TypeScript errors during migration. Then snapshot tests can help us find fixed errors and new...