Sprint Challenge - Web Unit 3 Sprint 11

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:

• Use waitFor to handle asynchronous operations
• Mock API calls to return test data
• Test both success and error scenarios
• Verify the UI updates appropriately after async operations

// Example of testing async operations
jest.mock('../api/fetchData');

test('displays data from API when loaded', async () => {
  // Set up mock
  fetchData.mockResolvedValueOnce({
    data: [{ id: 1, name: 'Test Item' }]
  });
  
  const { getByText, getByTestId } = render();
  const loadButton = getByText('Load Data');
  
  // Trigger the async action
  userEvent.click(loadButton);
  
  // Wait for the component to update
  await waitFor(() => {
    expect(getByTestId('data-item')).toBeInTheDocument();
    expect(getByText('Test Item')).toBeInTheDocument();
  });
  
  // Verify the API was called
  expect(fetchData).toHaveBeenCalledTimes(1);
});

Authentication and API Requests

You'll need to implement and test authentication workflows:

• Set up components that handle login and authentication
• Make proper API requests with authentication tokens
• Store and retrieve authentication tokens securely
• Implement protected routes based on authentication status

// Example of authentication implementation
const login = async (credentials) => {
  const response = await fetch('https://api.example.com/login', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(credentials)
  });
  
  if (!response.ok) {
    throw new Error('Login failed');
  }
  
  const data = await response.json();
  localStorage.setItem('token', data.token);
  return data;
};

Technical Assessment

• Build a complete React application
• Implement client-side authentication
• Write comprehensive tests
• Deploy the application

Career Readiness

• Update your portfolio
• Prepare for technical interviews
• Document your learning journey