Unit testing react

• ContactList.js

// ContactList.js
import React from 'react';
 
const ContactList = ({ contacts }) => (
  <ul>
    {contacts.map(contact => (
      <li key={contact.id}>{contact.name}</li>
    ))}
  </ul>
);
 
export default ContactList;
 

• ContactListTest.js

// ContactList.test.js
import React from 'react';
import { render } from '@testing-library/react';
import ContactList from './ContactList';
 
// Mock data for testing
const mockContacts = [
  { id: 1, name: 'John Doe' },
  { id: 2, name: 'Jane Smith' },
];
 
test('renders a list of contacts', () => {
  // Render the ContactList component with mock data
  const { getByText } = render(<ContactList contacts={mockContacts} />);
 
  // Verify that each contact name is rendered
  mockContacts.forEach(contact => {
    const contactElement = getByText(contact.name);
    expect(contactElement).toBeInTheDocument();
  });
});
 
test('renders correct number of contacts', () => {
  // Render the ContactList component with mock data
  const { container } = render(<ContactList contacts={mockContacts} />);
 
  // Verify that the correct number of contact list items are rendered
  const contactListItems = container.querySelectorAll('li');
  expect(contactListItems.length).toBe(mockContacts.length);
});