Assert runs before hook done updating state

CompanyDetailNew.js

import React, { useEffect, useState } from 'react';
import { CompanyNew } from '../../../Interfaces/Interfaces';
import Main from '../Main';
import MainLayout from '../MainLayout';

interface CompanyDetailNewProps {
	fetchCompanyNew: (apiFindCompanyNew: any, companyName: string) => Promise<CompanyNew>,
	apiFindCompanyNew: (companyName: string) => Promise<CompanyNew>,
	companyName: string
}

const CompanyDetailNew = (props: CompanyDetailNewProps) => {
	const [company, setCompany] = useState<CompanyNew>();
	const { fetchCompanyNew, apiFindCompanyNew, companyName } = props;

	useEffect(() => {
		const fetchData = async () => {
			const company: CompanyNew = await fetchCompanyNew(apiFindCompanyNew, companyName);
			setCompany(company);
		};

		fetchData();
	}, []);

	const title = 'Hashrocket Details';

	return (
		<Main>
			<MainLayout title={title}>
				{company && (
					<div className="panel vertical-space">
						<CompanyHeaderImage company={company} data-test-id="headerImage" />
						<CompanyName company={company} data-test-id="companyName" />
						<div data-test-id="tddSince">{company.tddSince}</div>
					</div>
				) || null}
			</MainLayout>
		</Main>
	);
};


function CompanyName({ company }: { company: CompanyNew }) {
	return (
		<div>
			Company Name: {company.name}
		</div>
	);
}


function CompanyHeaderImage({ company }: { company: CompanyNew }) {
	return (
		<div className="panel all-100 align-center">
			<img src={company.headerUrl} />
		</div>
	);
}


export default CompanyDetailNew;

CompanyNewActions.js

export async function fetchCompanyNew(apiFindCompanyNew: any, companyName: string): Promise<CompanyNew> {
	const response = await apiFindCompanyNew(companyName);
	return response.body.data.company;
}

CompanyNewApi.js

export async function apiFindCompanyNew(companyName: string): Promise<CompanyNew> {
	const query = {
		query: `query {
			company(companyName: "${companyName}") {
				headerUrl,
				name,
				tddSince
			}
		}`,
	};

	const response = sendRequest(query);
	return response;
}

test.js

import { expect, React } from "../../../test.imports";
import { isolateComponent } from "isolate-components";
import CompanyDetailNew from "../../../../../client/views/CompanyNew/CompanyDetailNew";
import { companyNewStub } from "../../../test.stubs";
import { CompanyNew } from "../../../../../Interfaces/Interfaces";
import { fetchCompanyNew } from "../../../../../client/actions/company/CompanyNewActions";
import { apiFindCompanyNew } from "../../../../../client/api/CompanyNewApi";


describe('Company Page', () => {
	
	it('shows header with image', async () => {
		const foundCompany: CompanyNew = { ...companyNewStub };
		const companyname = 'Test Company';
		
		const companyDetailNew = isolateComponent(<CompanyDetailNew
			fetchCompanyNew={fetchCompanyNew}
			apiFindCompanyNew={apiFindCompanyNew}
			companyName={companyname}
		/>);
		await Promise.resolve();
		const headerImage = companyDetailNew.findOne('[data-test-id=headerImage]');

	  expect(headerImage.props.company.headerUrl).to.equal(foundCompany.headerUrl);
	})
})