如何测试嵌入Angular应用的React组件并实现独立测试运行？

完全隔离Angular与React的两套测试运行链路，不对原有Angular测试的启动命令、执行环境、运行流程做任何修改，通过独立的配置、独立的启动命令执行React组件的测试，从根源上避免两套测试栈的配置冲突。

独立React测试环境配置 #

这套配置完全和Angular原生的Karma+Jasmine测试栈解耦，不会修改项目内已有的测试配置：

• 首先安装React测试所需的独立依赖，这些依赖仅服务于React测试流程，不对Angular的运行环境产生影响：
  jest、@testing-library/react、@testing-library/jest-dom、ts-jest、@types/jest
• 在项目根目录新建独立的Jest配置文件jest.react.config.js，配置逻辑如下：

  module.exports = {
    // 仅匹配带React标识后缀的测试文件，完全绕开Angular的测试文件
    testMatch: ['<rootDir>/src/**/*.react.spec.tsx'],
    // 独立配置tsx编译规则，不修改Angular原有ts测试的编译配置
    transform: {
      '^.+\\.(tsx|ts)$': ['ts-jest', { tsconfig: 'tsconfig.react.json' }]
    },
    // 模拟浏览器DOM环境，适配ReactDOM的渲染逻辑
    testEnvironment: 'jsdom',
    // 配置和项目一致的模块路径映射规则
    moduleNameMapper: {
      '^@react/(.*)$': '<rootDir>/src/shared/react-components/$1'
    },
    // 引入测试DOM断言的扩展能力
    setupFilesAfterEnv: ['@testing-library/jest-dom/extend-expect']
  }
  

• 配套新建独立的React测试专用ts配置tsconfig.react.json，仅开启React编译所需的jsx语法支持，不加载Angular特有的装饰器、视图层编译规则，避免配置冲突。

独立测试命令配置 #

完全保留package.json中原有的Angular测试脚本，不对原有配置做任何修改，新增React测试的独立启动命令：

• 保留原有Angular测试命令不变，比如"test": "ng test"的配置完全不动，执行时还是按照原来的流程启动Karma、执行所有Angular单测。
• 新增两个独立的React测试命令：
  • "test:react": "jest --config jest.react.config.js"：单次执行所有React组件的测试用例
  • "test:react:watch": "jest --config jest.react.config.js --watch"：开发阶段监听文件变更，自动触发React测试执行

React测试用例的编写规则 #

为了和Angular测试做明确区分，所有React组件的测试文件统一使用.react.spec.tsx后缀命名，配合Jest的匹配规则，只会扫描到这类文件执行测试，完全不会触达Angular的测试用例。
测试用例可直接按照react-testing-library的规范编写，不需要依赖Angular的TestBed测试环境，也不需要模拟Angular侧的ViewChild容器、ReactDOM.render的挂载流程，直接面向React组件本身做逻辑验证即可，示例写法如下：

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

test('React组件正常渲染指定文本', () => {
  render(<ReactDemoComponent content="测试内容" />);
  expect(screen.getByText('测试内容')).toBeInTheDocument();
});

关键注意事项 #

• 所有React测试的配置不要写入angular.json的原有测试节点，全部用独立文件维护，避免Angular的构建流程扫到React测试配置产生报错。
• 严格通过文件后缀做测试范围隔离，不要使用通配规则扫全量测试文件，避免Jest误加载依赖Angular TestBed的测试用例，导致环境不兼容报错。
• 日常开发中，运行ng test时的所有执行逻辑和配置，和引入React测试栈之前完全一致，不会出现流程变化。

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