爲什麼我的酶測試失敗？

我有一個簡單的測試，我試圖通過酶/摩卡/柴。這是錯誤：爲什麼我的酶測試失敗？

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

來源

2017-07-31 Dream_Cap

this.props.posts是undefined。 undefined沒有長度 - 只有字符串和數組做（或自定義的getter一些物品）

你需要PostList.defaultProps = { posts: [] }或者你讓它在propTypes isRequired或寫入遊測試爲<PostList posts={[]} />或渲染語句if (posts !== undefined && posts.length !== 0) {或const { posts = [] } = this.props - 你挑。

來源

2017-07-31 13:25:38

您正在呈現PostList而沒有定義帖子（在道具上）。

const wrapper = shallow(<PostList />)

所以，this.props.posts是不確定的，而你正試圖從一個不確定的變量讀取屬性（長度）

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

這導致了一個異常，測試失敗

來源

2017-07-31 13:13:29

爲什麼我的酶測試失敗？

回答

相關問題