This article is part of a series of ChatGPT experiments, in which I give ChatGPT a prompt, share its response, and offer some reflections.

Prompt #1

Can you write a React component in Typescript that will take two numbers as props and display a math equation showing the numbers being added together, along with their sum?

Response #1

Sure! Here's an example of a simple React component written in TypeScript that takes two numbers as props and displays a math equation showing the numbers being added together, along with their sum:

import React from 'react';

interface Props {
  num1: number;
  num2: number;
}

const Addition: React.FC<Props> = ({ num1, num2 }) => {
  const sum = num1 + num2;

  return (
    <div>
      <p>{`${num1} + ${num2} = ${sum}`}</p>
    </div>
  );
};

export default Addition;

You can use this component by passing in two numbers as props, like this:

import React from 'react';
import Addition from './Addition';

const App: React.FC = () => {
  return (
    <div>
      <Addition num1={5} num2={3} />
    </div>
  );
};

export default App;

Prompt #2

Could you write several tests using Jest to make sure the above component works as expected with different inputs?

Response #2

Yes, here are a few tests using Jest that you can use to verify that the Addition component works as expected with different inputs:

import React from 'react';
import { render } from '@testing-library/react';
import Addition from './Addition';

describe('Addition component', () => {
  it('should display the correct sum for positive numbers', () => {
    const { getByText } = render(<Addition num1={5} num2={3} />);
    const sum = getByText('5 + 3 = 8');
    expect(sum).toBeInTheDocument();
  });

  it('should display the correct sum for negative numbers', () => {
    const { getByText } = render(<Addition num1={-5} num2={-3} />);
    const sum = getByText('-5 + -3 = -8');
    expect(sum).toBeInTheDocument();
  });

  it('should display the correct sum for a mixture of positive and negative numbers', () => {
    const { getByText } = render(<Addition num1={5} num2={-3} />);
    const sum = getByText('5 + -3 = 2');
    expect(sum).toBeInTheDocument();
  });
});

Reflections

Again, I am impressed!

ChatGPT can write JSX in Typescript, providing an interface for component props, and giving props intuitive names.

The component is exactly what I asked for and the code is crystal clear.

Additionally, ChatGPT offered an example of how to use the component without being prompted!

When I asked for some Jest tests to go along with the new component, ChatGPT didn't let me down. It had enough sense to test different combinations of positive and negative numbers, and it knew exactly which additional testing library to import and which of its methods to use.

Like previous ChatGPT experiments, this one has helped convince me that ChatGPT is a perfect developer sidekick.

What developer doesn't wish they could just focus on solving problems, leaving the actual code implementation to someone else? If you give ChatGPT your blueprints, it will build your project for you, piece by piece. You just have to handle quality control and gluing the pieces together.