React: Demonstrating - Continuous Integration | Continuous Delivery | Continuous Deployment | Big O | Unit Testing | Type Checking

App.js

// MyComponent.js

import React from 'react';

// Define a functional component that takes a prop called "name"
function MyComponent({ name }) {
  // Return a div with an h1 that displays a greeting using the "name" prop
  return (
    <div>
      <h1>Hello, {name}!</h1>
    </div>
  );
}

// Export the component so it can be used elsewhere
export default MyComponent;


// MyComponent.test.js

import React from 'react';
import { render, screen } from '@testing-library/react';
import MyComponent from './MyComponent';

// Use describe to group our tests together
describe('MyComponent', () => {
  // Write a test that checks if the correct name is rendered
  it('renders the correct name', () => {
    // Render the component with the prop "name" set to "Alice"
    render(<MyComponent name="Alice" />);
    // Use getByText to get the element that contains the text "Hello, Alice!"
    const nameElement = screen.getByText(/Hello, Alice!/i);
    // Use expect to assert that the element is in the document
    expect(nameElement).toBeInTheDocument();
  });

  // Write a test that checks if the default name is rendered
  it('renders the default name if none is given', () => {
    // Render the component without any props
    render(<MyComponent />);
    // Use getByText to get the element that contains the text "Hello, World!"
    const nameElement = screen.getByText(/Hello, World!/i);
    // Use expect to assert that the element is in the document
    expect(nameElement).toBeInTheDocument();
  });
});

/*Competency demonstrated: Writing clean, readable code

The code is organized and easy to read, with comments that explain what each part of the code does. This makes it easier for other developers (or even yourself in the future) to understand the code and make changes if necessary.

Competency demonstrated: Using React to build components

The MyComponent component is written in React and uses JSX to define its structure. It takes a prop called name and uses it to display a greeting. This demonstrates proficiency in building React components.

Competency demonstrated: Writing test cases with Jest and testing-library

The MyComponent.test.js file contains two test cases that use Jest and @testing-library/react to test the MyComponent component. The tests check if the component renders the correct content based on the props passed in. This demonstrates proficiency in writing test cases with Jest and testing-library.

Competency demonstrated: Debugging with testing-library

The screen.getByText function is used to find elements in the document that contain specific text. If the element is not found, testing-library throws an error with helpful information to help debug the issue. This demonstrates proficiency in using testing-library to debug code.
*/