Enzyme: TypeError: wrapper.find(...).exists is not a function

[FakhruddinAbdi]

When i'm running same example given in exist api page

I got following the error in console

 TypeError: wrapper.find(...).exists is not a function

[aweary]

Hey @FakhruddinAbdi, thanks for the issue. That feature was recently merged and hasn't been released yet.

Refer to the published API docs instead of the docs in the repo, as we'll make sure to publish any doc changes alongside the minor release that will accompany exists()

[dpikt]

Getting this error in 2.7.1, exists() is in the published API docs too...?

_edit:_ Figured it out. I was calling it on a wrapper returned by render(), the Cheerio API doesn't have that method.

[blainekasten]

Quick side note - What are you using the Cheerio wrapper for that the other wrappers can't do?

[dpikt]

@blainekasten I was using it to deep-render my components, it seemed less costly than running mount() since I don't care about lifecycle methods or DOM APIs. Is that the right call or would you suggest doing something else?

[ljharb]

I'd suggest using shallow at every level :-p

[blainekasten]

@dpikt it's not necessarily wrong. I just am curious if anyone actually uses the Render api. I personally would be pretty happy getting rid of it all together.

[bay007]

I use shallow : my code,

it('Render if Editable component if have Editable photo', () => {
  const photos = new Map();
  photos.set(1, { isEditable: false });
  photos.set(2, { isEditable: true });
  photos.set(3, { isEditable: false });

  const wrapper = shallow(<Editable photos={photos} />);
});

where Editable component starts with:

export const Editable = class _Editable extends Component {
  render() {
    const editablePhoto = this.props.photos.values().find(photo => {
      return photo.isEditable;
    });
.
.
.

The error:

[ljharb]

@bay007 a Map's values function returns an iterator, not an array - you'd need [...this.props.photos.values()].find instead.

[palaniichukdmytro]

I got the same error:
should login on entering /login-callback or redirect to / :
TypeError: result.find is not a function

describe('<Routes/>', () => {
    let routes
    let redirectToLoginPage
    let login

    beforeEach(() => routes = shallow(<Routes redirectToLoginPage={redirectToLoginPage = sinon.spy()} login={login = sinon.spy()}/>))


    it.only('should login on entering /login-callback or redirect to / ', () => {

        let result = routes.find(Route).findWhere(x => x.props().path === '/login-callback').props().render()
        console.log(result.type)


        login.calledOnce.should.be.true
        result.find(Redirect).length.should.be.equal(1)
        result.props.to.should.be.equal('/')
    })

[palaniichukdmytro]

I solve the main problem, but why I recive the
expected to be of type [Function: Redirect], but it is of type null
expect(result).to.have.type(Redirect)

[ljharb]

I'm not sure why you'd expect result - which is a cheerio wrapper - to have a type of Redirect

[palaniichukdmytro]

@ljharb I'm testing the react router v4, so the result expect return the Redirect component

 <Route path='/login-callback' render={() => {

                if (!isLoggedIn)
                    login()
                return <Redirect to="/"/>

            }}
            />

[ljharb]

Ah, I misunderstood - you're manually calling the render prop. In that case, the result will be a React element - it won't have a .find method at all.

[palaniichukdmytro]

yes, I've already noticed that, the code looks now like this:

it.only('should login on entering /login-callback or redirect to / ', () => {

        let result = shallow(routes.find(Route).findWhere(x => x.props().path === '/login-callback').props().render())
        console.log(result.unrendered)


        login.calledOnce.should.be.true
        expect(result).to.have.type(Redirect)
        result.props.to.should.be.equal('/')
    })

AssertionError: expected to be of type [Function: Redirect], but it is of type null
I'm only starting with enzyme

[ljharb]

because now result is an enzyme shallow wrapper. You want:

const result = shallow(<div>{routes.find(Route).findWhere(x => x.props().path === '/login-callback').props().render()}>/div>)
expect(result.is(Redirect)).to.equal(true);

[palaniichukdmytro]

Yes, but in this case, I catch an error:
AssertionError: expected false to equal true

• expected - actual
  -false
  +true

[palaniichukdmytro]

this one help me
result.props().render().type.should.be.equal(Redirect)

[palaniichukdmytro]

How to check the if else statement logic here. Cuase when I cover my app, catch the warning that else path not taken

<Route path='/login-callback' render={() => {
                if (!isLoggedIn)
                    login()
                return <Redirect to="/"/>
            }}
            />

my unit test:

describe('<Routes/>', () => {
    let routes
    let redirectToLoginPage
    let login
    let isLoggedin
    beforeEach(() => routes = shallow(<Routes redirectToLoginPage={redirectToLoginPage = sinon.spy()} login={login = sinon.spy()}/>))

    it('should login on entering /login-callback or redirect to / ', () => {
        let redirect = routes.find(Route).findWhere(x => x.props().path === '/login-callback').props().render()

        login.calledOnce.should.be.true

        redirect.type.should.be.equal(Redirect)
        redirect.props.to.should.be.equal('/')
    })

[ljharb]

that means you're not testing when "isLoggedIn" is true (only when it's false).

@palaniichukdmytro none of these questions are an issue, nor related to this issue - can you please ask them in our gitter channel instead?

[palaniichukdmytro]

@ljharb done, thanks