Reactjs 为什么我的酶测试失败了？

我有一个简单的测试，我想通过酵素/摩卡咖啡/柴。以下是错误：

  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

1）应具有一个容器，用于固定立柱：
TypeError:无法读取未定义的属性“length”
在PostList.render（D:/mydocs/webdev/gitprojs/ReactBlogFinal/views/PostList/PostList.jsx:13:9）
在节点_modules\react test renderer\lib\shallow\ReactCompositeComponent.js:795:21
在measureLifeCyclePerf（节点\u modules\react test renderer\lib\shall\ReactCompositeComponent.js:75:12）
在ShallowComponentRapper.\u RenderValidatedComponent，没有自己的或上下文（节点\u modules\react test renderer\lib\shallow\reactComponent.js:794:25）
在ShallowComponentWrapper.performInitialMount（节点\u modules\react test renderer\lib\shallow\ReactCompositeComponent.js:361:30）
在ShallowComponentWrapper.mountComponent（节点\u modules\react test renderer\lib\shallow\ReactCompositeComponent.js:257:21）
在Object.mountComponent（node_modules\react test renderer\lib\shallow\ReactReconciler.js:45:35）
在ReactShallowRenderer.\u渲染（节点\u模块\react测试渲染器\lib\shallow\ReactShallowRenderer.js:138:23）
在_batchedRender（节点_modules\react test renderer\lib\shall\reactshallwrender.js:85:12）
在Object.batchedUpdate（node_modules\react test renderer\lib\shallow\ReactDefaultBatchingStrategy.js:60:14）
在Object.batchedUpdate（node_modules\react test renderer\lib\shall\ReactUpdates.js:97:27）
在reactshallwrender.render（节点\u modules\react test renderer\lib\shall\reactshallwrender.js:112:18）
在ReactShallWrender.render（节点\u modules\enzyme\build\react compat.js:171:37）
在节点_modules\enzyme\build\shallowRapper.js:128:26
在ReactDefaultBatchingStrategyTransaction.perform（节点\u modules\react test renderer\lib\shallow\Transaction.js:143:20）
在Object.batchedUpdate（node_modules\react test renderer\lib\shallow\ReactDefaultBatchingStrategy.js:62:26）
在Object.batchedUpdate（node_modules\react test renderer\lib\shall\ReactUpdates.js:97:27）
在reactshallwrender.js中，不稳定的批处理更新（节点\u modules\react test renderer\lib\shall\reactshallwrender.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);
  });
});

从“React”导入React；
从“酶”导入{mount，shallow，render}；
从“chai”导入{expect}；
从“/PostList”导入PostList；
描述（“”，（）=>{
它（'应该有一个用来装柱子的容器'，（）=>{
常量包装器=浅（）；
expect（wrapper.find（'div'））.to.have.length（1）；
});
});

这是一个组件。这个组件将是一个博客文章的容器，if语句测试posts对象的长度，如果它通过，我的post div将开始生成。所以我知道这些文章一开始是未定义的。在React中，在呈现方法中使用这样的逻辑是一种不好的做法吗？或者这是t上的一个问题他站在哪一边

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

从“React”导入React；
导出默认类PostList扩展React.Component{
render（）{
const posts=this.props.posts；
让postDivs；
如果（posts.length！==0）{
postDivs=posts.map（post=>(
{post.title}
{发布日期}
{post.author}
{post.body}
));
console.log（postDivs）；
}
返回(
{postDivs}
);
}
}

您在呈现帖子列表时没有定义帖子（在道具上）

const wrapper=shallow（）

因此，this.props.posts是未定义的，您正在尝试从未定义的变量读取属性（长度）

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

1）应具有一个容器，用于固定立柱：
TypeError:无法读取未定义的属性“length”

---

这会导致异常，并且您的测试失败

您正在呈现PostList，而没有定义posts（在props上）

const wrapper=shallow（）

因此，this.props.posts是未定义的，您正在尝试从未定义的变量读取属性（长度）

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

1）应具有一个容器，用于固定立柱：
TypeError:无法读取未定义的属性“length”

---

这导致异常，并且您的测试失败

此.props.posts

未定义

undefined

没有长度-只有字符串和数组有长度（或某些具有自定义getter的对象）

---

您需要

PostList.defaultProps={posts:[]}

或者在

propTypes

中要求它，或者将巡更测试作为

编写，或者将呈现语句作为

if（posts！==undefined&&posts.length！==0）{

或

const{posts=[]}=this.props

-自己选择。

this.props.posts

是

未定义的

未定义的

没有长度-只有字符串和数组有长度（或某些具有自定义getter的对象）

您需要

PostList.defaultProps={posts:[]}

或者在

propTypes

中要求它，或者将tour test作为

编写，或者将render语句作为

if（posts！==undefined&&posts.length！==0）{

或

const{posts=[]}=this.props

-请选择