web-dev-qa-db-ja.com

Enzyme.jsでレンダリングされたコンポーネントを小道具に渡すにはどうすればよいですか？

次のようなSongLinkコンポーネントがあります。

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

このコンポーネントをテストするためにJestテストを作成しようとしています。私の最初の試みは次のようになりました：

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()
})

このエラーが発生しました：TypeError: Cannot read property 'id' of undefined私が理解したのは、おそらく小道具をテストに正しく渡していないことを意味していました。

次に、これを試しました。その目的は、小道具がどのように見えるかをモックすることでした。

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()
})

上記のコードを実行すると、以前と同じエラーが発生します。

私が間違っていること、またはここで理解していないことについてアドバイスをいただければ幸いです。ありがとうございました！

編集：この質問はこの他の質問の複製であることが示唆されています： テストを開始するReact EnzymeとJestを使用したコンポーネント 。

これは重複ではないと思います。 JestとEnzymeを使用してコンポーネントをテストしたいことはわかっています。テストが機能するために必要な小道具を実際にモックするために必要な構文に問題がありました。提案された複製は、より抽象的で概念的です。私の質問は、これらの概念のきめ細かい実行についてです。

reactjsecmascript-6jestjsenzyme
7
maecapozzi

テストしているSongLinkコンポーネントには、次のプロパティを含むオブジェクトが必要です。

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

テストする必要のあるコンポーネントをshallowレンダリングするときに、合格する必要があります。あなたはそれを次のように行うことができます

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

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