DOP-2642: Use React Testing Library instead of Enzyme #528
Conversation
| const wrapper = await mountSidenav(); | ||
| expect(findCollapseButton(wrapper)).toHaveAttribute('aria-expanded', 'true'); | ||
|
|
||
| // js-dom isn't properly reflecting styled components updating active css across media queries |
There was a problem hiding this comment.
Would it be better to move all of our components that use emotion's styled to just use css for easier testing? Or would switching to css not fix this problem?
There was a problem hiding this comment.
Just wanted to bump this question in case it got lost! No worries if this is something that is unknown for now
There was a problem hiding this comment.
I'm not sure if switching to css would solve the problem - I'm also not very keen on trying to change the implementation of our css for what seems to be a testing library quirk 🤔
I'm not 100% sure why this isn't behaving as expected either - for now I've added a workaround similar to what I did for FeedbackWidget, where we try to assert that the style rule exists for display:none at mobile size viewports.
| const wrapper = await mountSidenav(); | ||
| expect(findCollapseButton(wrapper)).toHaveAttribute('aria-expanded', 'true'); | ||
|
|
||
| // js-dom isn't properly reflecting styled components updating active css across media queries |
There was a problem hiding this comment.
Just wanted to bump this question in case it got lost! No worries if this is something that is unknown for now
* DOP-2642: Update low/mid complexity tests to use RTL, not enzyme * DOP-2642: Add ThemeProvider to all deeply referenced renders * DOP-2642: Convert FeedbackWidget and Code tests to RTL * DOP-2642: Update jest.config.js to remove enzyme and add jest-dom * DOP-2642: Update Hook tests, mid-complexity tests * DOP-2642: Everything except Redoc * DOP-2642: OpenAPI tests mocked with RTL * DOP-2642: Update Snapshots from merge * DOP-2642: Pardon the dust * DOP-2642: Workaround for css not updating properly across viewports
Stories/Links:
DOP-2642
Staging Links:
N/A - no source files changed.
Notes:
Changes all of our tests to render with RTL instead of enzyme.
Enzyme will remain in our package.json and package-lock files but will be removed in the changeset for the actual React 17 upgrade.
Quirky/Awkward Selectors:
React Testing Library is meant to work with the actual dom elements rendered by our React components, with queries targeting display text, labels, roles, titles, or alt text, etc.
So there are some scattered... quirky selectors in our tests now, eg:
expect(versionDropdown.parentElement).toHaveAttribute('aria-disabled', 'true');where the
versionDropdownwas selected via the rendered text, but the element which isdisabledis actually the parent element.There's some scattered instances of
mySelectedElement.closest(<tag I actually want to assert on>)also - I've tried to add TODO's where it seems like we could change the implementation to make testing (and accessibility) a little better.Removed Tests
Some of our test suites either had redundant tests (
FeedbackWidgetanduseFeedbackStatetested many of the same things) or tests that couldn't be accommodated easily (Sidenavhas tests across viewpoints, and the css when rendered wouldn't update when the viewport was changed -jsdomlimitation with styled components;jsdompowers React Testing Library).I've tried to add TODO's where it seemed like the tests could be re-added in the future, or with sufficient time, but if anything stands out, please feel free to highlight!