Add option in shallow renderer to run effects/componentDidUpdate/componentDidMount

[bdwain]

Do you want to request a feature or report a bug?
feature

What is the current behavior?
the shallow renderer does not run componentDidUpdate, componentDidMount, or useEffect functions. (I'll call them effect functions for short)

What is the expected behavior?
See this enzyme issue for more details about where this request is coming from. But the general idea is that it is often nice to run effect functions even when shallow rendering, rather than having to use full rendering on those specific tests.

If the shallow renderer provided an option to run the effect functions, it would allow people who test with shallow rendering to more easily test their components. Enzyme currently supports this in class components by calling componentDidUpdate/mount directly on the component instance, but this would be a much harder thing to do for hooks, since they are usually anonymous.

Enzyme used to not allow this at all, but then added an option to turn on this behavior in their shallow renderer, before finally turning it on by default and then adding an option to turn it off. It didn't seem to cause too many issues for them, so I think this approach could work well for the React shallow renderer as well. Obviously I'm only asking for an option to turn it on now, not to change the default or anything.

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?
All and no it was never supported AFAIK

[bdwain]

Any more thoughts on this? I'd be happy to attempt a PR to add this option if there's is no opposition and it's just a matter of prioritizing it.

[bdwain]

I'll start working on a PR

[agrasley]

Any chance we could get some eyes from a maintainer on the pull request for this issue? It's been sitting there for a while and it would be nice to have this support for testing hooks in libraries like enzyme. Thanks!

[hweeks]

This feature is vital for us to be able to move over to some of these newer paradigms in React. Is there anything we can do to help bump this ticket for visibility?

[pmoeller91]

Likewise this is a big deal. Hooks support on shallow rendering is crucial.

[yanlipnican]

I hope this get done soon. We would like to use hooks.

[nagman]

This feature is crucial. As my whole project only uses hooks, I can test none of useEffect functions with Enzyme.

Could this issue be assigned to someone?

[insidewhy]

@nagman Consider it assigned to me! I've opened a PR with the feature fully implemented. I'm happy to do whatever it takes to get this merged if a maintainer can make time to review it.

[insidewhy]

Might also be worth up-voting my PR here: #16168 might get it more visibility with the react maintainers.

[thedanchez]

Any updates on when this PR would get assigned and merged in? Really need Hooks fully supported for Enzyme Shallow Rendering.

[insidewhy]

@thedanchez Facebook won't support shallow rendering the their shallow renderer anymore so they won't merge my PR or any others relating to that area. Don't think it's pragmatic given the work is already there. They offered to move the shallow renderer into its own package and hand over maintenance, but when we asked a few questions relating to how this would happen, they went back into ignore mode.

[Sonic12040]

@ohjames - Can you link me to a source for that discontinued support for shallow rendering?

[insidewhy]

@Sonic12040 #16168 (comment)

[thedanchez]

I'm trying to keep that issue thread active by checking in on a weekly basis. I really think this feature needs to be added ASAP.

Don't know what's keeping them from handing ownership of react-shallow-renderer over to Airbnb or to the community at larger sooner rather than later.

[Sonic12040]

Thanks for keeping that active! I'm sure given the number of tickets they must receive (internal and external), that it might be some time before they can migrate a section of the code out.

[insidewhy]

@thedanchez the shallow renderer uses a bunch of methods in the shared folder that aren't exported by react. We asked them about it but they stopped responding. You're probably better off giving up on the shallow renderer at this point, Facebook don't care to maintain anything that isn't useful to Facebook and are clearly too busy to respond to anything not in their own interests. They say shallow renderer encourages brittle tests. They didn't give justification but they believe it. People in the PR thread gave arguments with good justifications against this but they aren't listening.

[insidewhy]

@thedanchez BTW enzyme isn't maintained by Airbnb anymore, mostly by a single develop who used to work at Airbnb. I doubt Airbnb would be interested in maintaining the shallow renderer.

[thedanchez]

@ohjames oh man, I overlooked that detail. As far as shallow rendering based testing goes, what do you guys think is the best course of action for those who are using React Hooks in their components? I'd really like to avoid having to do a full mount in testing...

[tsolman]

Hi can you please unsubscribe me somehow. I don't recall subscribing to it bust in any case I don't think I should be seeing all this or receiving it . thank you Silvia Juhansoo Compliance & AML Officer *BDSwiss Holding PLC* *@:* [email protected] *Confidentiality Notice: This e-mail, its content and any files transmitted with it are confidential and/or privileged information and is intended solely for the use of the recipient(s) only. Any review, retransmission, dissemination or other use of, or taking of any action in reliance upon, this information by persons or entities other than the intended recipient(s) is prohibited. If you are not the intended recipient(s) or have received this e-mail in error please notify the sender immediately, destroy this e-mail and delete the material from any computer. Any unauthorized copying, disclosure or distribution of the material in this e-mail is strictly forbidden. Risk Warning: Trading CFDs is highly speculative and carries a high level of risk. It is possible to lose all of your invested capital. These products may not be suitable for everyone and you should ensure that you fully understand the risks taking into consideration your investment objectives, level of experience, personal circumstances as well as your personal resources. Speculate only with funds that you can afford to lose. Seek independent advice if necessary. Please refer to our Risk Disclosure here <https://t-eu.xink.io/Tracking/Index/sRUAAN1UAACiygsA0>.* *Disclaimer: Content of this email should not in any way be construed, either explicitly or implicitly, directly or indirectly, as investment advice, recommendation or suggestion of an investment strategy with respect to a financial instrument, in any manner whatsoever. Any views or opinions presented in this email are solely of the author and do not necessarily represent those of the Company, unless otherwise specifically stated. Any indication of past performance or simulated past performance included in this document is not a reliable indicator of future results.* *Swiss Markets (eu.swissmarkets.com <https://t-eu.xink.io/Tracking/Index/tRUAAN1UAACiygsA0>) and BDSwiss (eu.bdswiss.com <https://t-eu.xink.io/Tracking/Index/thUAAN1UAACiygsA0>) are trademarks of BDSwiss Holdings PLC, a Company incorporated under the laws of Cyprus with incorporation no. HE300153 and regulated by the Cyprus Securities and Exchange Commission (“the CySec”) under licence number 199/13 .* *BDSwiss Holding PLC is operating through its Group company BDS Markets Ltd that is granted the authorization to use it's trade names, domains and platforms: BDS Markets Ltd is an investment firm, incorporated in the Parliamentary Republic of Mauritius (Company Number: 143350) and is authorised and regulated by the Financial Services Commission of Mauritius (FSC) under License Number: C116016172, Websites:www.bdswiss.com <https://t-eu.xink.io/Tracking/Index/txUAAN1UAACiygsA0> and www.swissmarkets.com <https://t-eu.xink.io/Tracking/Index/uBUAAN1UAACiygsA0>. Please refer to our Risk Disclosure here <https://t-eu.xink.io/Tracking/Index/uRUAAN1UAACiygsA0>. *

…

On Wed, Oct 23, 2019 at 6:08 PM Daniel Sanchez ***@***.***> wrote: @ohjames <https://github.com/ohjames> oh man, I overlooked that detail. As far as shallow rendering based testing goes, what do you guys think is the best course of action for those who are using React Hooks in their components? I'd really like to avoid having to do a full mount in testing... — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#15275?email_source=notifications&email_token=ACRJ4BCISTA27PDFCT22SNLQQBSH7A5CNFSM4HCQH4QKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOECBX76I#issuecomment-545488889>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ACRJ4BHID7DGGKC4VXPXVATQQBSH7ANCNFSM4HCQH4QA> .

[kumar303]

@tsolman This explains how to unsubscribe from issue notifications.

@thedanchez The viable and supported alternative right now is to test with a full mount and use something like jest mocks to prevent nested components from rendering. The react-testing-library FAQ has an example of mimicking shallow rendering with this technique but I dislike how all nested components need to be mocked manually.

If anyone knows of a way to automatically mock all nested components but not the component under test, please let me know. I've been looking into implementing something like that, including support for "unwrapping" HOCs.

[sombreroEnPuntas]

While this is solved, here's a workaround:

// index.tsx
import React from 'react';

export const Component: React.FunctionComponent = () => {
  React.useEffect(() => {
    console.log('Rawr!');
  }, []);

  return <>{'🦕'}</>;
};

// index.test.tsx
import React from 'react';
import { shallow } from 'enzyme';

import { Component } from './index';

jest.spyOn(React, 'useEffect').mockImplementation(f => f());
console.log = jest.fn();

describe(`Component`, () => {
  it('should greet on mount', () => {
    shallow(<Component />);
    expect(console.log).toHaveBeenCalledTimes(1);
  });
});

[shiraze]

Unfortunately, I think the only way forward is to use mount(), but that doesn't mean you need to do a "full mount" of all subcomponents. Tests can still mock sub-components so that they're rendered with a mock, e.g.

jest.mock("./mySubComponent", () => () => "MySubComponent");

If the above mocked item needs to be referenced in tests, it needs to be imported (and will then get mocked by above), and can then be referenced by with the import name, e.g.

import MySubComponent from "./mySubComponent";
...
...
const findComponent = wrapper.find(MySubComponent);

[michael-ecb]

Hi,
is it an active issue ?

[VishalGulati]

Any update on this please?

[antonstjernquist]

I want this :-)

[thedanchez]

Not sure if you all are aware on this thread, but this topic of discussion has been going on in another GitHub thread: #17321

[bdwain]

I'm going to close this issue in favor of the other one linked above.