add support to specify max level to shallow/mount

[dalimian]

shallow is one level deep vs mount is unlimited level deep, I wanted something in between - to be able to specify max level
can we add support to pass options.level to shallow/mount - e.g.
shallow(<MyCompoent />, {level: 2})

[ljharb]

That's not something that's possible with shallow or mount.

It will be possible after #1007; but it wouldn't be with a number level (which is brittle), it'd be by defining certain nodes as additional "leaves" that should not be dived into.

[dalimian]

thanks, take your word, though curious as to why it wouldn't be possible now with shallow.

Agree taking a black list of nodes is more robust than taking a number.

[dalimian]

and is there a plan/open issue to do it, or should we create one and submit a PL

[ljharb]

shallow calls into react-test-renderer's shallow method, which doesn't allow for changing leaf nodes.

[dalimian]

thanks. is there an open issue?

[ljharb]

duplicate of #250

[lfelipequiros]

I know is useless for components inside the wrapper component, but for cases like this one may be useful for someone to shallow inside a shallow.

shallow(
      <WrapperComponent /'>
        { shallow(<Component {...props}/>) }
      </WrapperComponent >);
);

[ljharb]

@lfelipequiros i'm relatively sure that wouldn't work; but you might want:

shallow(
      <WrapperComponent >
        <Component {...props} />
      </WrapperComponent>;
);

?

[lfelipequiros]

@ljharb Why are you relatively sure ? maybe im missing something, but im seeing it working fine . . .
Checking the coverage it is actually doing what i expect, and doesn´t even throw a warning or something like that.

Now that im giving it a closer look maybe is just parsing that shallow object to a unused param inside the wrapper component.

I'll run a couple of test, if i can provide more context on this, i'll come back : )

[ljharb]

An enzyme wrapper isn’t a node; React is probably converting it to a string implicitly.

[HamidTanhaei]

@lfelipequiros @ljharb
using shallow() inside a component totally works fine.

it('should render Redirect on userToken doe`s not exists', () => {
    const wrapper = shallow(<Router>{shallow(<PrivateRoute />)}</Router>);
    expect(shallow(wrapper.find(Route).props().render())).toMatchSnapshot();
  });

[ljharb]

@HamidTanhaei that would fail if the children propType was defined as PropTypes.node.

[udayrajMT]

Just putting a link to docs for dive() https://enzymejs.github.io/enzyme/docs/api/ShallowWrapper/dive.html

[KeitelDOG]

The same problem still exists, and since member @ljharb talk about an option to put a list of leaves nodes to avoid diving, I realized the best way for me was to:

• Use mount()
• Mock the biggest components that will mount too many other components.

For example, let's say I'm testing a Post page, then I mount it, and before doing this I mock components like: Comments, Similar Contents, Analytics, and keep the focus on Post information like the title, contents and interactions, etc. As to mock with jest, I use variable starting with mock so that it can be passed from outside (jest mock external variable constraint) :

import { Text as MockText } from 'react-native';

jest.mock('../../../../src/views/comments', () => {
  return function Comments(props) {
    return <MockText>Comments Here</MockText>;
  };
});

There you escape the tons of components, you still benefit from mount() and useEffect(), and you can dive() in it if you want console.log(wrapper.find('Comments').dive().debug()); and you'll reach the text inside if necessary.