React国际化组件浅渲染疑问：如何查看UsersSearch内部组件？

Got it, let's tackle this problem! The issue here is that injectIntl is a Higher-Order Component (HOC) that wraps your UsersSearch component—so when you do a shallow render, you're only rendering the HOC itself, not the actual component you care about. Here are a few solid ways to get around this:

1. Render the raw UsersSearch component directly (Recommended) #

Instead of rendering the wrapped version (injectIntl(UsersSearch)), import and render the un-wrapped UsersSearch in your test, then manually pass the intl prop it depends on. You can either mock a minimal intl object or use React Intl's built-in utilities to create a valid one.

First, make sure you export the un-wrapped component alongside the default wrapped export in your file:

// UsersSearch.jsx
export const UsersSearch = ({ intl }) => {
  // Your component logic here
};

export default injectIntl(UsersSearch);

Then in your test:

import { UsersSearch } from './UsersSearch';
import { createIntl } from 'react-intl';
import { shallow } from 'enzyme'; // Or your testing library of choice

// Create a mock intl object with the methods your component uses
const mockIntl = createIntl({
  locale: 'en',
  messages: {
    // Add any message keys your component references, e.g.:
    'users.search.placeholder': 'Search users...'
  }
});

test('renders internal search input', () => {
  const wrapper = shallow(<UsersSearch intl={mockIntl} />);
  // Now you can query for internal components:
  expect(wrapper.find('[data-testid="search-input"]')).toHaveLength(1);
});

This approach keeps your tests focused on the component itself, not the HOC wrapping it.

2. Use dive() to penetrate the HOC (Enzyme-specific) #

If you need to test the wrapped component (e.g., to verify the HOC is injecting props correctly), Enzyme's shallow render has a dive() method that lets you go one level deeper into the HOC's output.

import WrappedUsersSearch from './UsersSearch'; // The injectIntl-wrapped default export
import { shallow } from 'enzyme';

test('wrapped component renders internal filter dropdown', () => {
  const wrapper = shallow(<WrappedUsersSearch />);
  const usersSearchComponent = wrapper.dive(); // Now this is the shallow render of UsersSearch
  
  // Inspect the internal structure:
  expect(usersSearchComponent.find('.filter-dropdown')).toBeTruthy();
});

Note: This only works for single-level HOCs. If you have multiple HOCs wrapping UsersSearch, you'd need to call dive() multiple times, which can get brittle. Stick to option 1 for most unit tests.

3. For React Testing Library users #

RTL prioritizes testing user behavior over implementation details, but if you need to verify internal component structure, the best approach is still to render the un-wrapped UsersSearch with a valid intl context. You can use IntlProvider to wrap the component:

import { render, screen } from '@testing-library/react';
import { UsersSearch } from './UsersSearch';
import { IntlProvider, createIntl } from 'react-intl';

const mockIntl = createIntl({
  locale: 'en',
  messages: { 'users.search.label': 'Search Users' }
});

test('displays search label correctly', () => {
  render(
    <IntlProvider value={mockIntl}>
      <UsersSearch intl={mockIntl} />
    </IntlProvider>
  );
  
  expect(screen.getByLabelText(/search users/i)).toBeInTheDocument();
});

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