React 16.4+Redux组件测试咨询：能否使用React Testing Library？

一、React Testing Library 兼容 React 16.4 吗？ #

完全可以。@testing-library/react 的 9.x 版本系列 专门兼容 React 16.x 全版本，包括16.4，不需要升级你的React版本。

二、解决 CSS 导入导致的 Babel 报错 #

不管用Enzyme还是React Testing Library，只要是基于react-scripts的项目，出现CSS导入报错的核心原因是测试环境无法解析样式文件，直接用Jest模拟即可：

• 方法1：全局配置模拟
  在项目src目录下创建setupTests.js（如果没有的话），添加：

  // 模拟所有CSS文件导入
  jest.mock('*.css', () => ({}));
  

• 方法2：package.json 配置
  在package.json的jest字段中添加模块映射：

  "jest": {
    "moduleNameMapper": {
      "\\.(css|less|scss)$": "<rootDir>/src/__mocks__/styleMock.js"
    }
  }
  

  然后创建src/__mocks__/styleMock.js，内容为：

  module.exports = {};
  

三、React 16.4 + Redux 组件的最佳测试方案 #

优先选择 React Testing Library + Redux Mock Store，这种组合更贴近用户真实交互场景，而非测试组件内部实现细节，是目前社区推荐的最佳实践。

1. 安装依赖 #

npm install --save-dev @testing-library/react@9.x @testing-library/jest-dom redux-mock-store

（注：@testing-library/react@9.x是兼容React16.4的最高稳定版本）

2. 测试普通UI组件（无Redux依赖） #

直接用React Testing Library渲染并模拟用户交互：

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

test('点击按钮触发回调', () => {
  const mockCallback = jest.fn();
  render(<SubmitButton onClick={mockCallback}>提交</SubmitButton>);
  
  fireEvent.click(screen.getByText('提交'));
  expect(mockCallback).toHaveBeenCalledTimes(1);
});

3. 测试连接Redux的组件 #

用redux-mock-store模拟Redux store，通过Provider传递给组件：

import React from 'react';
import { render, screen } from '@testing-library/react';
import { Provider } from 'react-redux';
import configureStore from 'redux-mock-store';
import UserCard from './UserCard';

// 初始化mock store
const mockStore = configureStore([]);

test('渲染Redux store中的用户信息', () => {
  const initialState = {
    user: { nickname: '阿明', level: 10 }
  };
  const store = mockStore(initialState);
  
  render(
    <Provider store={store}>
      <UserCard />
    </Provider>
  );
  
  expect(screen.getByText('阿明')).toBeInTheDocument();
  expect(screen.getByText('等级：10')).toBeInTheDocument();
});

4. 单独测试Redux逻辑（Action/Reducer） #

如果需要测试Redux的纯逻辑，直接单独测试即可：

// 测试Reducer示例
import userReducer from './reducers/user';

test('处理USER_UPDATE动作', () => {
  const initialState = { nickname: '旧名字' };
  const action = { type: 'USER_UPDATE', payload: { nickname: '新名字' } };
  const newState = userReducer(initialState, action);
  
  expect(newState.nickname).toBe('新名字');
});

四、如果坚持用Enzyme的配置方案 #

若你仍想使用Enzyme，先解决CSS报错，再安装兼容React16的版本：

npm install --save-dev enzyme enzyme-adapter-react-16

然后在setupTests.js中配置适配器和CSS模拟：

import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

Enzyme.configure({ adapter: new Adapter() });
// 模拟CSS导入
jest.mock('*.css', () => ({}));

内容的提问来源于stack exchange，提问作者Abhilash D K