React Testing

MetricDisplay.test.tsx

describe('MetricDisplay', () => {
  given('value', () => '100');

  beforeEach(() => {
    render(<MetricDisplay value={given.value} />);
  });

  it('renders metric value', () => {
    expect(screen.getByText('100')).toBeVisible();
  });

  describe('when value is null', () => {
    given('value', () => null);

    it('renders N/A', () => {
      expect(screen.getByText('N/A')).toBeVisible();
    });
  });
});

MetricDisplay.tsx

const MetricDisplay: React.FC<{ value: string | null }> = ({ value }) => {
  if (!value) {
    return <span>N/A</span>;
  }

  return <span>{formatNumber(value)}</span>;
};

UserCard.test.tsx

// factories.tsx
import { Factory } from 'fishery';

const user = Factory.define<User>(() => ({
  name: 'John',
  email: 'john@example.com',
  messagesSent: 10,
  messagesReceived: 5,
  lastSignIn: '2022-01-01T10:30:00-07:00',
}));

export const factories = {
  user
}

// UserCard.test.tsx
describe('UserCard', () => {
  beforeEach(() => {
    const user = factories.user.build({
      name: 'John',
      messagesSent: 10,
      messagesReceived: 5
    });

    render(<UserCard user={user} />);
  });

  it('renders user data', () => {
    expect(screen.getByText('Name: John')).toBeVisible();
    expect(screen.getByText('Messages sent: 10')).toBeVisible();
    expect(screen.getByText('Messages received: 5')).toBeVisible();
  });
});

UserCard.tsx

type User = {
  name: string;
  email: string;
  messagesSent: number;
  messagesReceived: number;
}

const UserCard: React.FC<{ user: User }> = ({ user }) => {
  return (
    <div>
      <div>Name: {user.name}</div>
      <div>Messages sent: {user.messagesSent}</div>
      <div>Messages received: {user.messagesReceived}</div>
    </div>
  );
};

UserCardComplete.test.tsx

describe('UserCard', () => {
  given('messagesSent', () => 10);
  given('user', () => factories.user.build({
    name: 'John',
    messagesSent: given.messagesSent,
    messagesReceived: 5
  }));

  beforeEach(() => {
    render(<UserCard user={given.user} />);
  });

  it('renders user data', () => {
    expect(screen.getByText('Name: John')).toBeInTheDocument();
    expect(screen.getByText('Messages sent: 10')).toBeInTheDocument();
    expect(screen.getByText('Messages received: 5')).toBeInTheDocument();
  });

  it('does not render superuser tag', () => {
    expect(screen.queryByText('SUPERUSER')).not.toBeInTheDocument();
  });

  describe('when user has over 1k messages sent', () => {
    given('messagesSent', () => 1001);

    it('renders superuser tag', () => {
      expect(screen.getByText('SUPERUSER')).toBeInTheDocument();
    });
  })
});