Enzyme: .instance() not getting me the instance of function component

Created on 18 Sep 2019  路  6Comments  路  Source: enzymejs/enzyme

FunComponent:

import React, { useState } from 'react';

export default function FunComp(){

function test() {
    console.log("2222222");
}

return (
    <div>
        hello
    </div>
);

};

AppComp
import React, { Component } from 'react';

export default class AppComp extends Component {

constructor(props) {
    super(props);
}

test() {
    console.log("1111111111111111");
}

render() {
    return (
        <div to='/'>Here is a link</div>
    );
};

}

Test:

And in my test when i am trying to following code
describe('basic rendering tests', function () {

 it.only('test', function () {

const selfAccounts = { };

const store = mockStore({
accounts: selfAccounts
});

    wrapper2 = mount(
        <Provider store={store}>
            <AppComp />
           <FunComp></FunComp>
        </Provider>);

//This works and calls the test method
console.log(wrapper2.find(AppComp).instance().test());
//This is not working and failing with message : TypeError: Cannot read property 'test' of null

console.log(wrapper2.find(FunComp).instance().test());
});
});

Please suggest how to access the instance of the functional component.

question

Most helpful comment

@vishwa3 So how would I go about testing event handler methods?

All 6 comments

I just read the following

Returns the single-node wrapper's node's underlying class instance; this in its methods.

NOTE: can only be called on a wrapper instance that is also the root instance. With React 16 and above, instance() returns null for stateless functional components.

I would like to understand that after the advent of hooks now functional component stateful. Then how it is handled in Enzyme??

Functional components don鈥檛 have an instance in React 16+, it has nothing to do with hooks.

Separately, in your first example, the javascript language makes it impossible to ever access that closed-over function from outside the containing function, so that has nothing to do with enzyme or react.

I had the same issue. I'm wondering if there is any way to test the methods within functional components at all? If not, what would be your recommended solution?

Functional components don鈥檛 have an instance in React 16+, it has nothing to do with hooks.

I understand its logically irrelevant to Hooks or enzyme. However, if it's unsolvable, it would prevent people either from using Hooks or from testing them.

@CristianoYL functions have no methods, only classes do - so no, you can't test things inside closures in JavaScript - that's the nature of the language.

Things inside closures are private, and private things should not be tested anyways. Test them implicitly by passing props and asserting on the render output of the component.

I too am using functional components and hooks with event handler methods but I think there's no way to test those event handling methods

@vishwa3 So how would I go about testing event handler methods?

Was this page helpful?
0 / 5 - 0 ratings

Related issues

benadamstyles picture benadamstyles  路  3Comments

AdamYahid picture AdamYahid  路  3Comments

modemuser picture modemuser  路  3Comments

potapovDim picture potapovDim  路  3Comments

nelsonchen90 picture nelsonchen90  路  3Comments