add enzyme-adapter-react-17 (no TODO tags) #2534

createthis · 2021-08-10T16:49:41Z

Same as #2430 with TODO_17 tags removed.

How working on this PR made me feel:

codecov · 2021-08-10T16:58:42Z

Codecov Report

Merging #2534 (46d0422) into master (8c55734) will decrease coverage by 0.48%.
The diff coverage is 92.06%.

@@            Coverage Diff             @@
##           master    #2534      +/-   ##
==========================================
- Coverage   96.31%   95.83%   -0.49%     
==========================================
  Files          49       53       +4     
  Lines        4207     4749     +542     
  Branches     1130     1304     +174     
==========================================
+ Hits         4052     4551     +499     
- Misses        155      198      +43

Impacted Files	Coverage Δ
packages/enzyme-adapter-utils/src/Utils.js	`96.26% <ø> (ø)`
...pter-react-17/src/findCurrentFiberUsingSlowPath.js	`68.42% <68.42%> (ø)`
...ges/enzyme-adapter-react-17/src/detectFiberTags.js	`85.24% <85.24%> (ø)`
...zyme-adapter-react-17/src/ReactSeventeenAdapter.js	`96.11% <96.11%> (ø)`
packages/enzyme-adapter-react-17/src/index.js	`100.00% <100.00%> (ø)`
...pter-react-helper/src/getAdapterForReactVersion.js	`100.00% <100.00%> (ø)`
packages/enzyme/src/ShallowWrapper.js	`99.13% <100.00%> (+0.01%)`	⬆️
... and 1 more

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 8c55734...46d0422. Read the comment docs.

in 17.x

packages/enzyme-test-suite/test/shared/methods/setContext.jsx

createthis · 2021-08-10T19:18:15Z

packages/enzyme-test-suite/test/shared/lifecycles/misc.jsx

-          expect(info).to.deep.equal(expectedInfo);
+          if (is('>= 17')) {
+            expect(info).to.have.property('componentStack');
+            expect(info.componentStack).to.match(/at Thrower (.+)\n/);


This change is necessary because the backtrace now includes local file paths in 17.x.

UNSAFE_componentWillReceiveProps() on setContext()

lifecycle methods disabled according to test.

createthis · 2021-08-11T18:15:55Z

packages/enzyme/src/ShallowWrapper.js

+                instance.componentWillReceiveProps(props);
+              }
+              if (typeof instance.UNSAFE_componentWillReceiveProps === 'function') { // eslint-disable-line new-cap
+                instance.UNSAFE_componentWillReceiveProps(props); // eslint-disable-line new-cap


This code corrects shallow()'s calling of componentWillReceiveProps() and UNSAFE_componentWillReceiveProps() under react 17.

React.forwardRef under 17.

didn't come up with a workaround.

original PR, plus add an act() wrapper on shallow's simulate(), just to show it doesn't help.

createthis · 2021-08-13T14:58:51Z

packages/enzyme-test-suite/test/ShallowWrapper-spec.jsx

@@ -1716,7 +1716,7 @@ describe('shallow', () => {

      it('works without memoizing', () => {
        const wrapper = shallow(<RendersApp />);
-        expect(wrapper.debug()).to.equal('<App />');
+        expect(wrapper.debug()).to.equal(is('>= 17') ? '<AppMemoized />' : '<App />');


This appears to be due to a change in how React.memo() operates in React 17. Prior to 17 it seemed to return a copy of the component. In 17 it seems to return a reference.

createthis · 2021-08-13T15:01:02Z

packages/enzyme-test-suite/test/Utils-spec.jsx

@@ -600,7 +600,11 @@ describe('Utils', () => {
        Foo.displayName = 'CustomWrapper';

        const MemoForwardFoo = React.memo(React.forwardRef(Foo));
-        expect(adapter.displayNameOfNode(<MemoForwardFoo />)).to.equal('Memo(ForwardRef(CustomWrapper))');
+        if (is('>= 17')) {
+          expect(adapter.displayNameOfNode(<MemoForwardFoo />)).to.equal('Memo([object Object])');


I'm writing this a day after I took the screenshot, so it is possible it is the wrong screenshot, but I think the object looks like this:

createthis · 2021-08-13T15:18:42Z

packages/enzyme-adapter-react-17/src/ReactSeventeenAdapter.js

+  return isMemo(type) ? type.type : type;
+}
+
+function transformSuspense(renderedEl, prerenderEl, { suspenseFallback }) {


If I remove this method and all associated code, it goes from 5 suspense related test failures to 16 suspense related test failures. This code is clearly doing something useful.

createthis · 2021-08-13T18:47:48Z

packages/enzyme-test-suite/test/ReactWrapper-spec.jsx

@@ -1179,9 +1183,9 @@ describeWithDOM('mount', () => {
      const wrapper = mount(<SuspenseComponent />);
      expect(wrapper.debug()).to.equal(`<SuspenseComponent>
  <Suspense fallback={{...}}>
-    <div />
+    ${is('>= 17') ? '<Suspense mode="visible" />' : `<div />


Regrettably, I don't know why <Suspense mode="visible" /> is appearing instead of the expected html. The <Suspense /> subsystem in the 17 adapter is a bit beyond the limits of my domain knowledge so I am a little lost. I did my best to restore these suspense tests as completely as I could given my limitations. The <Suspense /> subsystem is listed as experimental by React, so I'm not sure how important it is: https://reactjs.org/docs/concurrent-mode-suspense.html

createthis · 2021-08-13T18:59:59Z

CONTRIBUTING.md

+
+In another terminal tab execute a specific test file for faster TDD test execution:
+```bash
+node_modules/.bin/mocha packages/enzyme-test-suite/build/ReactWrapper-spec.js


Incorporated tips provided by https://github.com/ljharb back into documentation.

shiraze · 2022-03-31T14:04:08Z

Hi guys, is this the correct place to ask what support my team and I can give to get a React 17 adaptor over the line? We've considered React-Testing-Library but the overhead of converting tests is so much that it might make better sense for us to provide support here.

ljharb · 2022-03-31T14:40:25Z

@shiraze yes, if you can provide people and time, i'd be happy to set up a call to get everyone on the same page so we can get things landed.

shiraze · 2022-03-31T14:52:24Z

@ljharb excellent. Let's set up a call

ljharb · 2022-03-31T14:58:33Z

@shiraze please reach out on twitter DMs or at gmail

mak12 · 2022-05-19T11:24:22Z

Any update on this?

shiraze · 2022-05-19T14:12:14Z

Unfortunately I wasn't able to provide people and time

ljharb and others added 8 commits August 10, 2020 16:17

[New] add enzyme-adapter-react-17

b6862d0

feat: add an adapter for React 17

d26a940

add versions to CI

31178a0

version updates

c6c9150

offscreencomponent wip

8a6075b

test TODOs

898978f

Remove TODO_17 tags

b8c5aed

Merge remote-tracking branch 'enzymejs/master' into feat/support-react17

388c6c9

createthis added 3 commits August 10, 2021 13:48

Fix two failing tests by using less fragile syntax.

60d857c

Fix another test with fragile matching.

0a4066c

componentWillReceiveProps and UNSAFE_componentWillReceiveProps removed

57b3109

in 17.x

createthis commented Aug 10, 2021

View reviewed changes

packages/enzyme-test-suite/test/shared/methods/setContext.jsx Outdated Show resolved Hide resolved

createthis commented Aug 10, 2021

View reviewed changes

createthis added 2 commits August 11, 2021 13:57

Fix shallow() so that it calls componentWillReceiveProps() and

da7b637

UNSAFE_componentWillReceiveProps() on setContext()

Forgot a test case. Call componentWillReceiveProps() even when shallow

d92c8b7

lifecycle methods disabled according to test.

createthis commented Aug 11, 2021

View reviewed changes

createthis mentioned this pull request Aug 11, 2021

[New] add enzyme-adapter-react-17 #2430

Open

createthis added 4 commits August 11, 2021 16:14

displayNameOfNode gets a little wonky when used with React.memo and

e4af0b6

React.forwardRef under 17.

punt on the simulate failure. I worked on this all day yesterday and

65cbc38

didn't come up with a workaround.

Make a few changes I saw https://github.com/wojtekmaj requested in the

1bde41e

original PR, plus add an act() wrapper on shallow's simulate(), just to show it doesn't help.

Add tip from https://github.com/ljharb to CONTRIBUTING

d0aa05b

createthis commented Aug 13, 2021

View reviewed changes

Restore suspense tests to the best of my ability.

46d0422

createthis commented Aug 13, 2021

View reviewed changes

createthis marked this pull request as ready for review August 13, 2021 19:00

This comment has been minimized.

Sign in to view

eps1lon mentioned this pull request Aug 2, 2022

add enzyme-adapter-react-17 #2564

Open

4 tasks

ljharb force-pushed the master branch 3 times, most recently from 43eb75e to 39e6b1f Compare November 3, 2022 21:47

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

add enzyme-adapter-react-17 (no TODO tags) #2534

add enzyme-adapter-react-17 (no TODO tags) #2534

createthis commented Aug 10, 2021 •

edited

codecov bot commented Aug 10, 2021 •

edited

createthis Aug 10, 2021 •

edited

createthis Aug 11, 2021

createthis Aug 13, 2021 •

edited

createthis Aug 13, 2021 •

edited

createthis Aug 13, 2021

createthis Aug 13, 2021 •

edited

createthis Aug 13, 2021

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

shiraze commented Mar 31, 2022

ljharb commented Mar 31, 2022

shiraze commented Mar 31, 2022

ljharb commented Mar 31, 2022

mak12 commented May 19, 2022

shiraze commented May 19, 2022

add enzyme-adapter-react-17 (no TODO tags) #2534

Are you sure you want to change the base?

add enzyme-adapter-react-17 (no TODO tags) #2534

Conversation

createthis commented Aug 10, 2021 • edited

codecov bot commented Aug 10, 2021 • edited

Codecov Report

createthis Aug 10, 2021 • edited

Choose a reason for hiding this comment

createthis Aug 11, 2021

Choose a reason for hiding this comment

createthis Aug 13, 2021 • edited

Choose a reason for hiding this comment

createthis Aug 13, 2021 • edited

Choose a reason for hiding this comment

createthis Aug 13, 2021

Choose a reason for hiding this comment

createthis Aug 13, 2021 • edited

Choose a reason for hiding this comment

createthis Aug 13, 2021

Choose a reason for hiding this comment

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

shiraze commented Mar 31, 2022

ljharb commented Mar 31, 2022

shiraze commented Mar 31, 2022

ljharb commented Mar 31, 2022

mak12 commented May 19, 2022

shiraze commented May 19, 2022

createthis commented Aug 10, 2021 •

edited

codecov bot commented Aug 10, 2021 •

edited

createthis Aug 10, 2021 •

edited

createthis Aug 13, 2021 •

edited

createthis Aug 13, 2021 •

edited

createthis Aug 13, 2021 •

edited