Javascript Can'；t在Jest/Ezyme中呈现可切换组件

我正在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);

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>
`;

从“React”导入React；
从'react router dom'导入{Link}；
从'react redux'导入{connect}；
从“../actions/posts”导入{startEditPost}；
从“/PostForm”导入PostForm；
从“力矩”中导入力矩；
导出类PostFeedItem扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
editItem:false
}
this.handloopenedit=this.handloopenedit.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（）{
返回(
{this.props.post.user}
{矩（this.props.post.createdAt）.format（'MMMM-Do，YYYY'）}

{
（this.state.editItem===true）(
取消
) : (
{this.props.post.text}
编辑文章
撤职
)
}
)
}
}
//常量mapStateToProps=（状态、道具）=>{
//返回{
//post:state.posts.find（（post）=>post.id==props.key）
//     }
// }
const mapDispatchToProps=（调度）=>({
startEditPost：（id，post）=>调度（startEditPost（id，post））
})
导出默认连接（未定义，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();

})

从“React”导入React；
从“酶”导入{mount，render}；
从“../../components/PostFeedItem”导入{PostFeedItem}；
从“../fixture/posts”导入post；
让startEditPost，包装器；
在每个之前（（）=>{
startEditPost=jest.fn（）；
包装=装载(
)
})
test（'应该用posts呈现postfeedpitem'，（）=>{
expect（wrapper.toMatchSnapshot（）；
})
test（'should toggle PostForm component'，（）=>{
wrapper.find（'.edit按钮'）.simulate（'click'）；
expect（wrapper.state（'editItem'））.toBe（true）
expect（wrapper.find（'PostForm'）.exists（））.toBeTruthy（）
expect（wrapper.toMatchSnapshot（）；
})

问题是，尽管单击edit按钮将状态更改为editItem=true，但测试套件似乎没有呈现PostForm组件，我在测试中得到了一个“false”结果，确定它是否存在。我检查了快照，确信PostForm组件没有在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);

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>
`;

exports[`should toggle PostForm component 1`]=`
4647ffdf

1970年1月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（），这很好地更新了组件。

Cool:）在检查问题本身之前，我认为@Leopn，good:）