how to fix TestingLibraryElementError: Unable to find an element with the text: "insert text here" issue?

Question

Cannot fix this issue that is failing tests. The test seems to only return a fail with the first prop (title)?

//PropertyCard.js
import React from 'react';

const PropertyCard = (
  {
    title, type, bathrooms, bedrooms, price, city, email,
  },
) => {
  <div className="property-card">
    <div className="property-card-title">{title}</div>
    <div className="property-card-type">{type}</div>
    <div className="property-card-city">{city}</div>
    <div className="property-card-bathrooms">
      {bathrooms}
    </div>
    <div className="property-card-bedrooms">
      {bedrooms}
    </div>
    <div className="property-card-price">
      {price}
    </div>
    <a href={`mailto:${email}`} className="property-card-email">
      Email
    </a>
  </div>;
};

//Properties.js
import React, { useEffect, useState } from 'react';
import '../styles/properties.css';
import PropertyCard from './PropertyCard';
import axios from 'axios';
import Alert from './Alert';

const Properties = () => {
  const initialState = {
    properties: [],
  };

  const [properties, setProperties] = useState(initialState.properties);
  const [alert, setAlert] = useState({ message: '' });

  useEffect(() => {
    axios
      .get('http://localhost:3000/api/v1/PropertyListing')
      .then((res) => setProperties(res.data))
      .catch(() => setAlert({
        message: 'An error occured whilst trying to retrieve properties. Please try again later.',
      }));
  }, []);

  return (
    <div className="properties">
      <h1>View Properties Page</h1>
      <Alert message={alert.message} />
      {properties.map((property) => (
        <div key={property._id} className="item">
          <PropertyCard {...property} />
        </div>
      ))}
    </div>
  );
};

//PropertyCard.test.js
import React from 'react';
import { render, screen } from '@testing-library/react';
import PropertyCard from '../components/PropertyCard';

describe('PropertyCard', () => {
  const validProps = {
    title: '2 bedroom flat',
    type: 'Flat',
    bedrooms: '2',
    bathrooms: '1',
    price: '1000',
    city: 'Manchester',
    email: 'testing@surreal-estate.com',
  };
  it('renders the correct props for each property', () => {
    render(<PropertyCard fields={validProps} />);
    expect(screen.getByText('2 bedroom flat')).toHaveClass('property-card-title');
    expect(screen.getByText('Flat')).toHaveClass('property-card-type');
    expect(screen.getByText('2')).toHaveClass('property-card-bedrooms');
    expect(screen.getByText('1')).toHaveClass('property-card-bathrooms');
    expect(screen.getByText('1000')).toHaveClass('property-card-price');
    expect(screen.getByText('Manchester')).toHaveClass('property-card-city');
    expect(screen.getByText('Email')).toHaveClass('property-card-email');
  });
});

I've searched and read similar issues with this error - but cannot seem to find a fix for my issue. Does anyone have any ideas why it's failing?

Seems to be to do with the useEffect() hook in Properties.js - tests were passing before I added this in to the project.

Answer 1

PropertyCard component has no fields prop. It should be

render(<PropertyCard {...validProps} />);