なぜ私の酵素検査は失敗しますか？

Question

私はEnzyme/mocha/chaiのために渡そうとしています。ここにエラーがあります：

1) <PostList /> should have a container for holding posts: 
    TypeError: Cannot read property 'length' of undefined 
     at PostList.render (D:/mydocs/webdev/gitprojs/ReactBlogFinal/views/PostList/PostList.jsx:13:9) 
     at node_modules\react-test-renderer\lib\shallow\ReactCompositeComponent.js:795:21 
     at measureLifeCyclePerf (node_modules\react-test-renderer\lib\shallow\ReactCompositeComponent.js:75:12) 
     at ShallowComponentWrapper._renderValidatedComponentWithoutOwnerOrContext (node_modules\react-test-renderer\lib\shallow\ReactCompositeComponent.js:794:25) 
     at ShallowComponentWrapper.performInitialMount (node_modules\react-test-renderer\lib\shallow\ReactCompositeComponent.js:361:30) 
     at ShallowComponentWrapper.mountComponent (node_modules\react-test-renderer\lib\shallow\ReactCompositeComponent.js:257:21) 
     at Object.mountComponent (node_modules\react-test-renderer\lib\shallow\ReactReconciler.js:45:35) 
     at ReactShallowRenderer._render (node_modules\react-test-renderer\lib\shallow\ReactShallowRenderer.js:138:23) 
     at _batchedRender (node_modules\react-test-renderer\lib\shallow\ReactShallowRenderer.js:85:12) 
     at Object.batchedUpdates (node_modules\react-test-renderer\lib\shallow\ReactDefaultBatchingStrategy.js:60:14) 
     at Object.batchedUpdates (node_modules\react-test-renderer\lib\shallow\ReactUpdates.js:97:27) 
     at ReactShallowRenderer.render (node_modules\react-test-renderer\lib\shallow\ReactShallowRenderer.js:112:18) 
     at ReactShallowRenderer.render (node_modules\enzyme\build\react-compat.js:171:37) 
     at node_modules\enzyme\build\ShallowWrapper.js:128:26 
     at ReactDefaultBatchingStrategyTransaction.perform (node_modules\react-test-renderer\lib\shallow\Transaction.js:143:20) 
     at Object.batchedUpdates (node_modules\react-test-renderer\lib\shallow\ReactDefaultBatchingStrategy.js:62:26) 
     at Object.batchedUpdates (node_modules\react-test-renderer\lib\shallow\ReactUpdates.js:97:27) 
     at ReactShallowRenderer.unstable_batchedUpdates (node_modules\react-test-renderer\lib\shallow\ReactShallowRenderer.js:130 

ここがテストです。 divが存在するかどうかを確認するためにテストしています：

import React from 'react'; 
import { mount, shallow, render } from 'enzyme'; 
import { expect } from 'chai'; 

import PostList from './PostList'; 


describe('<PostList />',() => { 

    it('should have a container for holding posts',() => { 
    const wrapper = shallow(<PostList />); 

    expect(wrapper.find('div')).to.have.length(1); 
    }); 
}); 

ここはコンポーネントです。このコンポーネントはブログ投稿のコンテナになります。if文は投稿オブジェクトの長さをテストし、投稿オブジェクトの長さをテストします。投稿オブジェクトの長さがテストされると、投稿divが生成され始めます。だから私は最初に投稿が未定義になることを知っている。 Reactのレンダリングメソッドにロジックを持たせるのは悪い習慣ですか？またはこれは酵素側の問題ですか？

import React from 'react'; 

export default class PostList extends React.Component { 
    render() { 
    const posts = this.props.posts; 
    let postDivs; 

    if (posts.length !== 0) { 
     postDivs = posts.map(post => (
     <div className="post-item" key={post._id}> 
      <h2 className="post-title">{post.title}</h2> 
      <h3 className="post-date">{post.date}</h3> 
      <h3 className="author">{post.author}</h3> 
      <p className="body">{post.body}</p> 
     </div> 
    )); 
     console.log(postDivs); 
    } 


    return (
     <div className="post-container"> 
     {postDivs} 
     </div> 
    ); 
    } 
} 

Answer 1

this.props.postsは、undefinedである。専用の文字列と配列ん（またはカスタムゲッターを持ついくつかのオブジェクト）

あなたがPostList.defaultProps = { posts: [] }を必要とするか、またはあなたはそれがpropTypesでIsRequiredこのまたはif (posts !== undefined && posts.length !== 0) {またはconst { posts = [] } = this.propsなど<PostList posts={[]} />またはレンダリング文としてツアーテストを記述します - - undefinedには長さがありませんお好きなところをお選びください。

Answer 2

あなたは投稿を（プロペラで）定義せずに表示しています。これは、例外を引き起こしていると、あなたのテストが失敗している未定義の変数からそう

const wrapper = shallow(<PostList />) 

、this.props.postsは未定義であり、あなたが財産（長さ）を読み取るしようとしている

1) <PostList /> should have a container for holding posts: 
TypeError: Cannot read property 'length' of undefined