Shallow Render Hook with Async Side Effects

featured.companies.spec.js

// "query" is left out, I didn't include those details, just know it's a GraphQL query

// This test just tests various wiring indirectly (such as the logic in useEffect), as well as other wiring and also the render() of FeaturedCompanies
// All I care about is that the wiring to get the data and present the data is working at the FeaturedCompanies Level
// I do not care about testing the full render of PresentableFeaturedCompanies, it's a dumb view.  We only test the surface area
// of that child view by ensuring companies was passed to it with data

// So in sum: I just care about testing FeaturedCompanies as a black box, which is basically just a presenter

it.only("shows featured companies listed by name", async () => {
  const newCompanies = [...companyStub, ...companyStub];
  const findFeaturedCompaniesStub = async () => newCompanies;

  const featuredCompanies = isolateComponent(<FeaturedCompanies findFeaturedCompanies={findFeaturedCompaniesStub} />);
  await Promise.resolve();
  const presentableCompanies = featuredCompanies.findOne(PresentableFeaturedCompanies);
  
  expect(presentableCompanies.props.companies).to.equal(newCompanies);
});

FeaturedCompanies.js

import React, { useEffect, useState } from 'react';
import { Company } from '../../Interfaces/Interfaces.company';

interface FeaturedCompaniesProps {
  findFeaturedCompanies: () => Promise<Array<Company>>
}

const FeaturedCompanies = (props: FeaturedCompaniesProps) => {
  const [featuredCompanies, setData] = useState([]);
  useEffect(() => {
    const fetchCompanies = async () => {
      const companies: Array<Company> = await props.findFeaturedCompanies();
      setData(companies);
    };

    fetchCompanies();
  }, []);

  return (
    <span>
      <div className="padding-bottom-50">
        <div className="section-heading bold padding-top-10 font-22"> New Companies</div>
          featuredCompanies && <PresentableFeaturedCompanies companies={featuredCompanies} data-testid="featuredCompanies" />
      </div>
    </span>
  );
};

export function PresentableFeaturedCompanies({ companies }) {
  return (
    <>
      <div className="margin-top-20">
        {companies.map((company) => (
          <div
            className="all-20"
	    data-testid="company"
	    key={`featured-${company.name}`}>
	   {company.name}
	  </div>
        ))}
      </div>
    </>
);
}

export default FeaturedCompanies;