無法在 Jest/Enzyme 中呈現可切換的組件

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 組件，並且我在確定它是否存在的測試中得到“false”結果。 我檢查了快照，果然 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() 並且更新了組件就好了。