Sprint Challenge - Web Unit 3 Sprint 11

Sprint Challenge Overview

The Sprint Challenge is your opportunity to demonstrate your understanding of the concepts covered in this sprint. You'll work on a comprehensive project that combines all the skills you've learned.

Key Objectives Tested

Testing React Components

You'll need to demonstrate your ability to write tests for React components, including:

  • Test components as props change using the rerender() function
  • Assert that certain elements are or are not present in the DOM
  • Test conditional rendering based on prop values
// Example of what you'll need to accomplish
test('component updates when props change', () => {
  const { rerender, getByText, queryByText } = render();
  
  // Test initial state
  expect(getByText('Initial State')).toBeInTheDocument();
  expect(queryByText('Updated State')).not.toBeInTheDocument();
  
  // Rerender with new props
  rerender();
  
  // Test updated state
  expect(queryByText('Initial State')).not.toBeInTheDocument();
  expect(getByText('Updated State')).toBeInTheDocument();
});

Mocking in Web Application Tests

You'll need to implement proper mocking techniques, including:

  • Create mocks for external modules like nanoid or utilities
  • Implement mock functions that return predictable values
  • Verify that functions were called with the expected parameters
// Example of mocking an external module
jest.mock('external-module', () => ({
  someFunction: jest.fn().mockReturnValue('mocked value')
}));

test('uses the mocked module correctly', () => {
  // Your test here
  expect(someFunction).toHaveBeenCalledTimes(1);
  expect(someFunction).toHaveBeenCalledWith(expectedArgs);
});

Testing Asynchronous API Calls

You'll demonstrate your ability to test components that make asynchronous API calls:

  • Mock API functions to return controlled data
  • Use waitFor to handle asynchronous updates
  • Verify that components react appropriately to API responses
// Example of testing an async API call
test('loads and displays data from API', async () => {
  // Mock API response
  mockApiCall.mockResolvedValueOnce({ data: [{ id: 1, name: 'Item 1' }] });
  
  render();
  
  // Wait for the component to update after the API call
  await waitFor(() => {
    expect(screen.getByText('Item 1')).toBeInTheDocument();
  });
  
  // Verify the API was called with expected parameters
  expect(mockApiCall).toHaveBeenCalledTimes(1);
  expect(mockApiCall).toHaveBeenCalledWith(expectedArgs);
});

Project Requirements

For this Sprint Challenge, you'll need to:

  1. Create a React application using Vite
  2. Implement components that fetch data from an API
  3. Write comprehensive tests for your components
  4. Deploy your application to Vercel

You'll be assessed on:

  • Code quality and organization
  • Test coverage and effectiveness
  • Proper implementation of testing techniques
  • Successful deployment of your application

Submission Guidelines

To submit your Sprint Challenge:

  1. Push your code to GitHub
  2. Deploy your application to Vercel
  3. Submit the GitHub repository URL and Vercel deployment URL
  4. Complete the reflection questions in the submission form

Resources

Sprint Challenge Repository Testing React Applications Documentation Vercel Deployment Guide