RSpec can not find modal in React/Rails view

Question

I have a modal in my Rails app that appears when you click on a button called "New Post." You can then fill out a form and it will create a post. This is all handled with React (if that matters). RSpec is unable to find any element within the modal. Here is my test:

require 'rails_helper'

RSpec.feature "Creating a post" do 

before do 
    @user = User.create(email:"email@gmail.com", password: "password")
end


scenario "A valid user creates a post" do 
    visit '/'
    click_link 'Login'
    fill_in "Email", with: "email@gmail.com"
    fill_in "Password", with: "password"
    click_button "Log in"
    click_link "New Post"
    expect(page).to have_content("Create a Post")
end
end 

Here is the error this test throws:

 expected to find text "Create a Post" in "Toggle navigation ReactBlog Home Logout New Post

I tried adding sleeps to see if the animation in the toggle was doing it, but nothing happened. Here is the full React class that contains the modal. Any thoughts would be helpful.

var Posts = React.createClass({
getInitialState: function(){
    return {
        posts: this.props.posts,
        post: {
            title: '',
            author: '',
            content: '',
            video: ''
        }
    }
},
handlePostCreate: function(){
    var that = this;
    $.ajax({
        method: 'POST',
        data: { post: that.state.post },
        url: '/posts.json',
        success: function(res){
            var newPostList = that.state.posts;
            newPostList.push(res);
            that.setState({
                posts: newPostList,
                post: {
                    title: '',
                    author: '',
                    content: '',
                    video: ''
                }
            });
        } 
    });
},
handlePostDelete(post){
    var postList = this.state.posts.filter(function(item) {
      return post.id !== item.id;
    });
    this.setState({posts: postList});
},
handleTitleChange(e) {
    var newPost = this.state.post
    newPost.title = e.target.value
    this.setState({post: newPost});
},
handleAuthorChange(e) {
    var newPost = this.state.post
    newPost.author = e.target.value
    this.setState({post: newPost});
},
handleContentChange(e) {
    var newPost = this.state.post
    newPost.content = e.target.value
    this.setState({post: newPost});
},
handleVideoChange(e) {
    var newPost = this.state.post
    newPost.video = e.target.value
    this.setState({ post: newPost });
},
render: function(){ 
        var that = this; 
        var postBoard = this.state.posts.map(function(post){
            return (
            <Post post={post} key={post.id} onDeletePost={that.handlePostDelete} />
            );
        });
    return (

        <div>

            <div className="modal fade" id="myModal" role="dialog">
                <div className="modal-dialog">
                    <div className="modal-content">
                        <div className="modal-header">
                          <button type="button" className="close" data-dismiss="modal">&times;</button>
                          <h4 className="modal-title">Create a Post</h4>
                        </div>
                        <div className="modal-body">
                            <div className='form-group'>
                                <input value={this.state.post.title} onChange={this.handleTitleChange} type='text' id="Title" className='form-control' placeholder="Title" />
                            </div>
                            <div className='form-group'>
                                <input value={this.state.post.author} onChange={this.handleAuthorChange} type='text' className='form-control' placeholder="Author" />
                            </div>
                            <div className='form-group'>
                                <input value={this.state.post.video} onChange={this.handleVideoChange} type="text" className='form-control' placeholder="Video URL" />
                            </div> 
                            <div className='form-group'>
                                <textarea value={this.state.post.content} onChange={this.handleContentChange} type="text" className="form-control" placeholder="Content" ></textarea>
                            </div>
                        </div>
                        <div className="modal-footer">
                            <button type="button" onClick={this.handlePostCreate} className="btn btn-primary" data-dismiss="modal">Post</button>
                        </div>
                    </div>
                </div>
            </div>


            { postBoard }

        </div>

    );
}
});

Answer 1

You have to enable javascript for the test.

scenario "A valid user creates a post", js: true do
  ...
end

Also, try adding save_and_open_page to see if you're getting what's expected

scenario "A valid user creates a post", js: true do
  ...
  save_and_open_page
end