Nsryjdtyk

How can I test this HOC with Enzyme? I've tried shallow but it covers only 40% of component.

export default compose(

  withState('showDropdown', 'handleDropdown', false),

  withHandlers({

    handleClickOutside: props => () => {

      props.handleDropdown(false)

    },

    menuItemClick: props => () => {

      props.handleDropdown(false)

    },

  }),

  onClickOutside,

)(AccountDropdown)

this is code of my test

const props = {

  showDropdown: false,

  handleDropdown: jest.fn(),

  menuItemClick: jest.fn(),

  onLogout: jest.fn(),

  user: {},

}



const output = mount(<AccountDropdown

  showDropdown={props.showDropdown}

  handleDropdown={props.handleDropdown}

  menuItemClick={props.menuItemClick}

  onLogout={props.onLogout}

  user={props.user}

/>)



console.log('output', output)



const TogleDropdown = output.find('TogleDropdown')

console.log('TogleDropdown', TogleDropdown)

expect(shallowToJson(output)).toMatchSnapshot()

also i can't test events becouse console.log output:

output ReactWrapper {}

Separate your code.
Give the enhancer one file and the component another.

On the enhancer, export only the generated HOC:

export default compose(

  withState('showDropdown', 'handleDropdown', false),

  withHandlers({

    handleClickOutside: props => () => {

      props.handleDropdown(false)

    },

    menuItemClick: props => () => {

      props.handleDropdown(false)

    },

  }),

  onClickOutside,

)

On the other file, export just the AccountDropdown (without wrapping). Then, somewhere else, export the "combination" of them:

import enhancer from './enhancer.js';

import AccountDropdown from './AccountDropdown.jsx';



export default enhancer(AccountDropdown);

Now, on the tests, import each individual file, "enhance" the component there and find the component properly:

import enhancer from './enhancer.js';

import AccountDropdown from './AccountDropdown.jsx';



const Component = enhancer(AccountDropdown);



const props = {

  showDropdown: false,

  handleDropdown: jest.fn(),

  menuItemClick: jest.fn(),

  onLogout: jest.fn(),

  user: {},

}



const output = mount(<Component {...props} />)



const ToggleDropdown = output.find(AccountDropdown) // no quotes

your ToggleDropdown will have the component for you to test. Example:

expect(handleDropdown).to.have.property('callCount', 0);

Note that the mount will return a ReactWrapper, according to the docs. You can take a look at the props by using the ToggleDropdown.props() function.