React测试库适合单元测试和集成测试。在你的情况下，你应该在以下代码中编写2个测试：

• ComponentA.test.tsx
• ComponentB.test.tsx

utils/renderWithProvider.ts

import { ReactElement } from 'react';
import { Provider } from 'react-redux';
import { PreloadedState } from '@reduxjs/toolkit';
import { render, RenderOptions } from '@testing-library/react';
import { setupStore, AppStore, RootState } from 'store';

interface ExtendedRenderOptions extends Omit<RenderOptions, 'queries'> {
  preloadedState?: PreloadedState<RootState>;
  store?: AppStore;
}

// eslint-disable-next-line import/prefer-default-export
export const renderWithProviders = (
  component: ReactElement,
  {
    preloadedState = {},
    // Automatically create a store instance if no store was passed in
    store = setupStore(preloadedState)
  }: // ...renderOptions
  ExtendedRenderOptions = {}
) => render(<Provider store={store}>{component}</Provider>);

ComponentA.test.tsx

import { cleanup, screen, RenderResult } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { renderWithProviders } from 'utils/renderWithProviders';
import ComponentA from '..';

const dispatchMock = jest
  .spyOn(store, 'dispatch')
  .mockImplementation(() => jest.fn());
jest.mock('store/yourData/yourDataSlice', () => ({
  setYourData: (data) => dispatchMock(data)
}));

describe('<ComponentA />', () => {
  let view: RenderResult;

  beforeEach(() => {
    view = renderWithProviders(<ComponentA />);
  });

  afterEach(() => {
    cleanup();
    jest.clearAllMocks();
  });

  it('should render', () => {
    expect(view.asFragment()).toMatchSnapshot();
  });

  it('click on button', async () => {
    const button = screen.getByRole('button');
    await userEvent.click(button);

    expect(dispatchMock).toHaveBeenCalledWith('some data');
  });
});

...
整个应用程序的测试是e2 e测试的一项任务。