Question

我正在React中创建一个Twitter克隆；我刚刚完成了“编辑”功能/组件，目前正在尝试为其创建测试套件。基本上，PostFeedItem组件的状态为editItem，为true时，将渲染PostForm组件以进行编辑；为false时，则自然地渲染帖子。

这是PostFeedItem组件：

import React from 'react';
import { Link } from 'react-router-dom';
import { connect } from 'react-redux';
import { startEditPost } from '../actions/posts';
import PostForm from './PostForm';
import moment from 'moment';

export class PostFeedItem extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            editItem: false
        }

        this.handleOpenEdit = this.handleOpenEdit.bind(this)
        this.handleCloseEdit = this.handleCloseEdit.bind(this)
    }

    onSubmit = (post) => {
        this.props.startEditPost(this.props.post.id, post);
        this.handleCloseEdit();
    }

    handleOpenEdit() {
        this.setState({ editItem: true })
    }

    handleCloseEdit() {
        this.setState({ editItem: false })
    }


    render() {
        return (

            <div>
                <h4>{this.props.post.user}</h4>
                <p>{moment(this.props.post.createdAt).format('MMMM Do, YYYY')}</p>
                {
                    (this.state.editItem === true) ? (
                        <div>
                            <PostForm 
                                post={this.props.post}
                                onSubmit={this.onSubmit}
                            />
                            <button onClick={this.handleCloseEdit}>Cancel</button>
                        </div>
                    ) : (
                        <div>
                            <h2>{this.props.post.text}</h2>
                            <button className="edit-button" onClick={this.handleOpenEdit}>Edit Post</button>
                            <button className="remove-button">Remove Post</button>
                        </div>
                    )
                }

            </div>
        )
    }
}

// const mapStateToProps = (state, props) => {
//     return {
//         post: state.posts.find((post) => post.id === props.key)
//     }
// }

const mapDispatchToProps = (dispatch) => ({
    startEditPost: (id, post) => dispatch(startEditPost(id, post))
})


export default connect(undefined, mapDispatchToProps)(PostFeedItem);

这是我到目前为止所做的测试：

import React from 'react';
import { mount, render } from 'enzyme';
import { PostFeedItem } from '../../components/PostFeedItem';
import posts from '../fixtures/posts';

let startEditPost, wrapper;

beforeEach(() => {
    startEditPost = jest.fn();
    wrapper = mount(
        <PostFeedItem
            startEditPost={startEditPost}
            post={posts[0]}
        />
    )
})

test('should render PostFeedItem with posts', () => {
    expect(wrapper).toMatchSnapshot();
})

test('should toggle PostForm component', () => {
    wrapper.find('.edit-button').simulate('click');
    expect(wrapper.state('editItem')).toBe(true)
    expect(wrapper.find('PostForm').exists()).toBeTruthy()
    expect(wrapper).toMatchSnapshot();

})

问题是，尽管单击“编辑”按钮可以将状态更改为具有editItem = true，但是测试套件似乎没有呈现PostForm组件，并且在测试中我得到了“假”结果，以确定它是否存在。我检查了快照，确定PostForm组件没有在PostFeedItem组件内部呈现：

exports[`should toggle PostForm component 1`] = `
<PostFeedItem
  post={
    Object {
      "createdAt": 0,
      "id": "1",
      "text": "This post is just a test!",
      "user": "4647ffdf",
    }
  }
  startEditPost={[Function]}
>
  <div>
    <h4>
      4647ffdf
    </h4>
    <p>
      January 1st, 1970
    </p>
    <div>
      <h2>
        This post is just a test!
      </h2>
      <button
        onClick={[Function]}
      >
        Cancel
      </button>
      <button
        className="remove-button"
      >
        Remove Post
      </button>
    </div>
  </div>
</PostFeedItem>
`;

尽管如此，它在实际应用中仍然可以正常工作。如何使测试正确呈现可切换组件？

Answer 1

想通了！我要做的就是将测试更改为以下内容：

test('should toggle PostForm component', () => {
    wrapper.find('.edit-button').simulate('click');
    expect(wrapper.state('editItem')).toBe(true)
    wrapper.mount();
    expect(wrapper.find('PostForm').exists()).toBeTruthy()
    expect(wrapper).toMatchSnapshot();

})

我在更改状态后添加了wrapper.mount（），并且对组件进行了更新。

无法在Jest / Enzyme中渲染可切换的组件

1 个答案: