Wsrtjtyk

Using fetchMock I want to make sure that the React component will display news stories from an external API. These tests were passing until I updated React from 15.4.2 to 16.4.2 and Enzyme from 2.9.1 to 3.7.0.

Issue is that when I run yarn run test it tells me that Error: Method “props” is only meant to be run on a single node. 0 found instead.

Putting a debugger and running wrapper.children().debug() displays the HTML without any of the news articles from fetch. However, wrapper.html() displays all the articles, which is exactly what I want. How can I run tests so that it's testing the contents in wrapper.html() not wrapper.children().debug()?

Spec file:

import News from '../../app/javascript/react/components/DailyUpdate/News'

import fetchMock from 'fetch-mock'



describe('News fetch news', () => {

  let wrapper;

  let newsData;



  beforeEach(() => {

    newsData = {

      "status": "ok",

      "totalResults": 5,

      "articles": [

        {

            "source": {

                "id": null,

                "name": "Androidheadlines.com"

            },

            "author": null,

            "title": "Valve's Upcoming VR Headset Leaks In Full",

            "description": null,

            "url": "https://www.androidheadlines.com/2018/11/valve-upcoming-vr-headset-leak.html",

            "urlToImage": null,

            "publishedAt": "2018-11-12T16:51:05Z",

            "content": null

        },

        {

          "source": {

            "id": null,

            "name": "Appleinsider.com"

          },

          "author": "AppleInsider",

          "title": "iPhone XR sales estimates slashed by Ming-Chi Kuo, as trade war headwinds swirl",

          "description": "Ming-Chi Kuo has cut expectations for sales of the iPhone XR for the next year by 30 percent to 70 million, based on a possibility of a trade war with China, and other factors possibly weighing on sales, very similar to his erroneous predictions of iPhone X v…",

          "url": "https://appleinsider.com/articles/18/11/12/iphone-xr-sales-estimates-slashed-by-ming-chi-kuo-similar-to-his-iphone-x-prognostications",

          "urlToImage": "https://apple.insidercdn.com/gallery/28487-44424-28273-43866-iPhone-XR-Hero-l-xl.jpg",

          "publishedAt": "2018-11-12T16:14:01Z",

          "content": "Ming-Chi Kuo has cut expectations for sales of the iPhone XR for the next year by 30 percent to 70 million, based on a possibility of a trade war with China, and other factors possibly weighing on sales, very similar to his erroneous predictions of iPhone X v… [+2568 chars]"

        },

        {

          "source": {

            "id": "business-insider",

            "name": "Business Insider"

          },

          "author": "Steven John",

          "title": "The best smartphone chargers you can buy",

          "description": "There are lots of ways to charge your phone now, so we've rounded up the best phone chargers, including wireless, fast, car chargers, and more.",

          "url": "http://uk.businessinsider.com/best-phone-charger",

          "urlToImage": "https://amp.businessinsider.com/images/5be5eb4c38150718db7fce86-960-480.jpg",

          "publishedAt": "2018-11-12T15:23:00Z",

          "content": "Why you'll love it: The Aukey Dual Port USB-C and USB Wall Charger works with all three common charging cables — the Lightning Cable, the Micro USB, and the USB-C. Whether you need to power up an iPhone 8 Plus, a Microsoft Surface tablet, a 12-inch MacBook, o… [+1578 chars]"

        },

        {

          "source": {

            "id": null,

            "name": "Cnet.com"

          },

          "author": "Andrew Krok",

          "title": "Jaguar's one-off F-Type rally car is the gnarliest kind of homage",

          "description": "This new dirt-pounder pays respect to the XK 120, itself a rally champ.",

          "url": "https://www.cnet.com/roadshow/news/jaguar-f-type-convertible-rally-car/",

          "urlToImage": "https://cnet4.cbsistatic.com/img/ntGwUbgZurzemPwiRfsU190qH-I=/2018/11/12/f4310247-66ff-45b4-93e8-d6ad75b30b81/jaguar-f-type-rally-ogi.jpg",

          "publishedAt": "2018-11-12T15:07:48Z",

          "content": "The Jaguar F-Type exudes effortless cool, but you know what would make it even better? Jaguar knows the answer -- turning it into a rally car, of course. Jaguar on Monday unveiled the F-Type rally car. Now, these won't be going into service anywhere, as they'… [+1361 chars]"

        },

        {

          "source": {

            "id": null,

            "name": "Macworld.com"

          },

          "author": "",

          "title": "13-inch MacBook Pro SSD service program FAQ: Everything you need to know",

          "description": "Apple has launched an SSD repair program for the 13-inch non-Touch Bar MacBook Pro. Here's everything you need to know.",

          "url": "https://www.macworld.com/article/3320456/macs/13-inch-macbook-pro-ssd-service-program-faq.html",

          "urlToImage": "https://images.idgesg.net/images/article/2018/07/13in-macbook-pro-no-touchbar-2018-100765203-large.jpg",

          "publishedAt": "2018-11-12T15:07:22Z",

          "content": "Despite Apple’s push to turn all Mac professionals into Touch Bar devotees, the 13-inch MacBook Pro with a traditional row of function keys has remained quite popular. If you own one, you might be able to take advantage of a new SSD service program. Here’s ev… [+2698 chars]"

        },

      ]

    }



    fetchMock.get('/api/v1/news', {

      status: 200,

      body: newsData

    });

    wrapper = mount(

      <News />

    )

  })



  afterEach(fetchMock.restore)



  describe('News', () => {

    it('renders the news with images.', (done) => {

      console.log(3,wrapper);

      setTimeout(() => {

        expect(wrapper.find('.news-card').length).toEqual(4);

        expect(wrapper.find('.news-image').length).toEqual(4);



        let images = wrapper.find('.news-image')

        expect(images.at(0).props().src).toEqual(newsData.articles[1].urlToImage)

        expect(images.at(1).props().src).toEqual(newsData.articles[2].urlToImage)

        expect(images.at(2).props().src).toEqual(newsData.articles[3].urlToImage)

        expect(images.at(3).props().src).toEqual(newsData.articles[4].urlToImage)



        let titles = wrapper.find('.news-title > a')

        expect(titles.at(0).props().href).toEqual(newsData.articles[1].url)

        expect(titles.at(1).props().href).toEqual(newsData.articles[2].url)

        expect(titles.at(2).props().href).toEqual(newsData.articles[3].url)

        expect(titles.at(3).props().href).toEqual(newsData.articles[4].url)



        titles = wrapper.find('.news-title')

        expect(titles.at(0).text()).toEqual(newsData.articles[1].title)

        expect(titles.at(1).text()).toEqual(newsData.articles[2].title)

        expect(titles.at(2).text()).toEqual(newsData.articles[3].title)

        expect(titles.at(3).text()).toEqual(newsData.articles[4].title)



        let descriptions = wrapper.find('p.news-description')

        expect(descriptions.at(0).text()).toEqual(newsData.articles[1].description)

        expect(descriptions.at(1).text()).toEqual(newsData.articles[2].description)

        expect(descriptions.at(2).text()).toEqual(newsData.articles[3].description)

        expect(descriptions.at(3).text()).toEqual(newsData.articles[4].description)

        done()

      })

    })

  })

})

Following is returned with wrapper.children().debug().

"<div className="grid-x grid-margin-x grid-margin-y news">

  <h1 className="cell small-24 news-header">

    News

  </h1>

</div>"

Following is returned with wrapper.html().

"<div class="grid-x grid-margin-x grid-margin-y news">

  <h1 class="cell small-24 news-header">News</h1>

  <div class="cell small-24 large-12 news-card ">

    <div class="news-image-container">

      <img class="news-image" src="https://apple.insidercdn.com/gallery/28487-44424-28273-43866-iPhone-XR-Hero-l-xl.jpg">

    </div>

    <h3 class="news-title">

      <a href="https://appleinsider.com/articles/18/11/12/iphone-xr-sales-estimates-slashed-by-ming-chi-kuo-similar-to-his-iphone-x-prognostications">

        iPhone XR sales estimates slashed by Ming-Chi Kuo, as trade war headwinds swirl

      </a>

    </h3>

    <p class="news-description">Ming-Chi Kuo has cut expectations for sales of the iPhone XR for the next year by 30 percent to 70 million, based on a possibility of a trade war with China, and other factors possibly weighing on sales, very similar to his erroneous predictions of iPhone X v…</p>

  </div>

  <div class="cell small-24 large-12 news-card ">

    <div class="news-image-container">

      <img class="news-image" src="https://amp.businessinsider.com/images/5be5eb4c38150718db7fce86-960-480.jpg">

    </div>

    <h3 class="news-title">

      <a href="http://uk.businessinsider.com/best-phone-charger">

        The best smartphone chargers you can buy

      </a>

    </h3>

    <p class="news-description">There are lots of ways to charge your phone now, so we've rounded up the best phone chargers, including wireless, fast, car chargers, and more.</p>

  </div>

  <div class="cell small-24 large-12 news-card ">

    <div class="news-image-container">

      <img class="news-image" src="https://cnet4.cbsistatic.com/img/ntGwUbgZurzemPwiRfsU190qH-I=/2018/11/12/f4310247-66ff-45b4-93e8-d6ad75b30b81/jaguar-f-type-rally-ogi.jpg">

    </div>

    <h3 class="news-title">

      <a href="https://www.cnet.com/roadshow/news/jaguar-f-type-convertible-rally-car/">

        Jaguar's one-off F-Type rally car is the gnarliest kind of homage

      </a>

    </h3>

    <p class="news-description">This new dirt-pounder pays respect to the XK 120, itself a rally champ.</p>

  </div>

  <div class="cell small-24 large-12 news-card ">

    <div class="news-image-container">

      <img class="news-image" src="https://images.idgesg.net/images/article/2018/07/13in-macbook-pro-no-touchbar-2018-100765203-large.jpg">

    </div>

    <h3 class="news-title">

      <a href="https://www.macworld.com/article/3320456/macs/13-inch-macbook-pro-ssd-service-program-faq.html">

        13-inch MacBook Pro SSD service program FAQ: Everything you need to know

      </a>

    </h3>

    <p class="news-description">

      Apple has launched an SSD repair program for the 13-inch non-Touch Bar MacBook Pro. Here's everything you need to know.

    </p>

  </div>

</div>"

News React Component

import React, { Component } from 'react';



class News extends Component {

constructor(props) {

    super(props);

    this.state = {

      news: 

    };



    this.fetchNews = this.fetchNews.bind(this)

  }



  fetchNews() {

    let weatherURL = `/api/v1/news`;

    fetch(weatherURL)

    .then(response => {

      if (response.ok) {

        return response;

      } else {

        let errorMessage = `${response.status} (${response.statusText})`,

        error = new Error(errorMessage);

        throw(error);

      }

    })

    .then(response => response.json())

    .then(data => {

      this.setState({

        news: data.articles

      })

    })

    .catch(error => console.error(`Error in fetch: ${error.message}`));

  }





  componentDidMount(){

    this.fetchNews()

  }



  render(){

    let newsWithImage = 

    let newsWithoutImage = 



    this.state.news.forEach(news => {

      if(news.urlToImage){

        newsWithImage.push(news)

      }else{

        newsWithoutImage.push(news)

      }

    })





    let news = newsWithImage.map(news => {

      return(

        <div key={news.title} className="cell small-24 large-12 news-card ">

          <div className="news-image-container">

            <img className="news-image" src={news.urlToImage} />

          </div>

          <h3 className="news-title"><a href={news.url}>{news.title}</a></h3>

          <p className="news-description">{news.description}</p>

        </div>

      )

    })

    return(

      <div className="grid-x grid-margin-x grid-margin-y news">

        <h1 className="cell small-24 news-header">News</h1>

        {news}

      </div>

    )

  }

}



export default News