sum1.test.tsx

import Sum from './Sum';
describe('Sum', () => {
  it('should render', () => (
  ));
  it('should have two inputs to add the numbers', () => (
  ));
  it('should have a button to fire the sum action', () => (
  ));
  it('should have text to show the result', () => (
  ));
  it('should sum value1 and value2 and show the result', () => (
  ));
})

sum1.tsx

import React from "react";
const Sum = () => <div />;
export default Sum;

sum2.test.tsx

import React from "react";
import { render, cleanup, fireEvent } from "@testing-library/react";
import Sum from "./Sum";

describe("Sum", () => {
  afterEach(cleanup) 
  
  it("should render", () => {
    const SumComponent = render(<Sum />);
    expect(SumComponent).toBeTruthy();
  });
});

sum2.tsx

import React from "react";

const Sum = () => (
  <div>
    <input data-testid="value1" />    
    <input data-testid="value2" />
  </div>
);
export default Sum;

sum3.test.tsx

import React from "react";
import { render, cleanup, fireEvent } from "@testing-library/react";
import Sum from "./Sum";

describe("Sum", () => {

   it('should have two inputs to add the numbers', () => {
    const { getByTestId } = render(<Sum />);
    
    const firstInput = getByTestId("value1");
    const secondInput = getByTestId("value2");
    
    expect(firstInput).toBeTruthy();
    expect(secondInput).toBeTruthy();
  });
});

sum3.tsx

import React, { useState } from "react";
const Sum = () => {
  
  const [value1, setValue1] = useState();
  const [value2, setValue2] = useState();
  const [result, setResult] = useState();
  
  const calculateSum = () => setResult(value1 + value2);
  
  return (
    <div>
     <input 
       data-testid="value1" 
       value={value1}
       onChange={e => setValue1(e.target.value)}
     />
     <input 
       data-testid="value2" 
       value={value2}
       onChange={e => setValue2(e.target.value)}
     />
     <button data-testid="sum-button" onClick={calculateSum} /> 
     <p data-testid="result-txt">{result}</p>
    </div>
   );
};

export default Sum;

sum4.test.tsx

import React from "react";
import { render, cleanup, fireEvent } from "@testing-library/react";
import Sum from "./Sum";
import "jest-dom/extend-expect";

describe("Sum", () => {
  it('should sum value1 and value2 and show the result', () => {
    const { getByTestId } = render(<Sum />);
    
    const firstInput= getByTestId("value1");
    fireEvent.change(firstInput, { target: { value: 1 } } );
    
    const secondInput= getByTestId("value2");
    fireEvent.change(secondInput, { target: { value: 1 } } );
    
    const sumBtn = getByTestId("sum-button");
    fireEvent.click(sumBtn);
    
    const result = getByTestId("result-txt");
    expect(result).toHaveTextContent(2);
  });
});