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

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

这是组件。该组件将成为博客 posts 的容器，if 语句测试 posts 对象的长度，如果通过，我的 post divs 将开始生成。所以我知道 posts 一开始是未定义的。在 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

您在渲染 PostList 时没有定义帖子（在 props 上）。

const wrapper = shallow(<PostList />)

因此，this.props.posts 是未定义的，您正在尝试从未定义的变量

中读取属性（长度）

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

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

Answer 2

this.props.posts 是 undefined。 undefined 没有长度 - 只有字符串和数组有（或一些带有自定义 getter 的对象）

你需要 PostList.defaultProps = { posts: [] } 或你在 propTypes 中将它设为 isRequired 或将巡回测试编写为 <PostList posts={[]} /> 或将渲染语句编写为 if (posts !== undefined && posts.length !== 0) { 或 const { posts = [] } = this.props -任你选。

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

Why is my Enzyme test failing?

mocha.js

chai

reactjs

enzyme