测试React无状态组件中的私有函数getMenuItems

Let’s walk through how to test this private function in your component. Since getMenuItems lives inside your TransactionListFilter functional component, we have two practical approaches to validate its behavior:

Approach 1: Indirect Testing (Verify Rendered Output) #

This is the React-recommended approach—instead of testing the function directly, we validate what it produces by checking the rendered UI. This focuses on the component’s behavior rather than implementation details.

Here’s how to do it with Jest and React Testing Library:

1. Set up your test file (e.g., TransactionListFilter.test.js)
2. Mock your filter data (adjust based on where filterCriteriaItems comes from—props, a context, etc.)
3. Render the component and check the generated menu items

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

// Mock your filter criteria data
const mockFilterItems = [
  { valu: 'all', name: 'See All' },
  { valu: 'pending', name: 'Pending' },
  { valu: 'completed', name: 'Completed' },
];

describe('TransactionListFilter', () => {
  it('renders the correct menu items via getMenuItems', () => {
    // Pass the mock data to the component (if it's a prop)
    render(<TransactionListFilter filterCriteriaItems={mockFilterItems} />);

    // Verify each menu item text exists in the DOM
    mockFilterItems.forEach(item => {
      expect(screen.getByText(item.name)).toBeInTheDocument();
    });

    // Optional: Check that each MenuItem has the correct value prop
    const menuItems = screen.getAllByRole('menuitem');
    menuItems.forEach((menuItem, index) => {
      expect(menuItem).toHaveAttribute('value', mockFilterItems[index].valu);
    });
  });
});

Approach 2: Direct Testing (Extract the Function) #

If you want to test getMenuItems in isolation (e.g., if it has complex logic), extract it into a separate utility file. This makes direct testing straightforward.

Step 1: Extract the function to a utility file #

Create a file like filterUtils.js:

// filterUtils.js
import MenuItem from './MenuItem'; // Import your MenuItem component

export const getMenuItems = (filterCriteriaItems) => {
  return filterCriteriaItems.map((data) => (
    <MenuItem value={data.valu} name={data.name}>{data.name}</MenuItem>
  ));
};

Step 2: Update your component to use the extracted function #

import { getMenuItems } from './filterUtils';

const TransactionListFilter = (props) => { 
  return ( 
    <Dropdown 
      className="Transaction-List-Filter-container-dropdown" 
      selectMode="single" 
      defaultText="See All" 
      onMenuItemClick={handleFilterChange} 
    > 
      <Menu> 
        {getMenuItems(props.filterCriteriaItems)} 
      </Menu> 
      {/* Rest of your component */}
    </Dropdown>
  );
};

Step 3: Test the function directly #

Now you can write a test for getMenuItems without rendering the entire component:

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

const mockFilterItems = [
  { valu: 'all', name: 'See All' },
  { valu: 'pending', name: 'Pending' },
];

describe('getMenuItems', () => {
  it('returns the correct MenuItem components', () => {
    const items = getMenuItems(mockFilterItems);

    // Check the number of items matches the input
    expect(items.length).toBe(mockFilterItems.length);

    // Validate each item's props and content
    items.forEach((item, index) => {
      const mockItem = mockFilterItems[index];
      const { container } = render(item);
      
      expect(container.textContent).toBe(mockItem.name);
      expect(item.props.value).toBe(mockItem.valu);
      expect(item.props.name).toBe(mockItem.name);
    });
  });
});

Key Takeaways #

• Indirect testing is preferred for React components because it mimics how users interact with your UI, avoiding brittle tests tied to implementation details.
• Direct testing is useful for utility functions with complex logic that you want to validate in isolation.
• Always mock dependencies (like external components or APIs) to keep tests focused on the function you’re testing.

内容的提问来源于stack exchange，提问作者Roli Agrawal