How do I pass props a component rendered with Enzyme.js?

Question

I have a SongLink component that looks like this:

import React from 'react'

const SongLink = props => (
  <ul className='search-results__ul'
      key={props.result.id} 
      onClick={props.handleClick} 
  >
    {props.result.name} by {props.result.artist}
  </ul>
)

export default SongLink

I am trying to write a Jest test to test this component. My first attempt looked like this:

import React from 'react'
import { shallow } from 'enzyme'
import { configure } from 'enzyme'
import Adapter from 'enzyme-adapter-react-15'

import SongLink from '../components/SongLink'

configure({ adapter: new Adapter() })

test('it renders correctly', () => { 
  const component = shallow(<SongLink />)
  let tree = component.toJSON()
  expect(tree).toMatchSnapshot()
})

I got this error: TypeError: Cannot read property 'id' of undefined which I understood probably meant I was not correctly passing props in to my test.

Then, I tried this, the goal of which was to mock what I thought a prop would look like:

import React from 'react'
import { shallow } from 'enzyme'
import { configure } from 'enzyme'
import Adapter from 'enzyme-adapter-react-15'

import SongLink from '../components/SongLink'

configure({ adapter: new Adapter() })   

test('it renders correctly', () => {

  // This is where I tried to imitate the props and pass them in. 

  const songLinkProps = {
    result: {
      id: '6rPO02ozF3bM7NnOV4h6s2'
    },
    handleClick: () => {
      console.log('click')
    }
  }

  const component = shallow(<SongLink key={songLinkProps.result.id} />)
  let tree = component.toJSON()
  expect(tree).toMatchSnapshot()
})

When I run the above code, I get the same error as before.

I would deeply appreciate any advice on what I'm doing wrong, or what I do not understand here. Thank you!

Edit: It has been suggested that this question is a duplicate of this other question: Getting started testing React components with Enzyme and Jest.

I don't think this is a duplicate. I know that I want to test my component using Jest and Enzyme. I just was having trouble with the syntax I needed to actually mock the props I need for my tests to work. The suggested duplicate is more abstract and conceptual. My question is about granular execution of those concepts.

Answer 1

The SongLink component that you are testing just requires an object that contains the following properties

• props.result.id
• props.handleClick
• props.result.name
• props.result.artist

You need to pass it when you shallow render the component you need to test. You can do it like

const songLinkProps = {
    result: {
      id: '6rPO02ozF3bM7NnOV4h6s2',
      name: 'sf',
      artist: 'sgs'
    },
    handleClick: () => {
      console.log('click')
    }
  }

  const component = shallow(<SongLink {...songLinkProps} />)