如何使用Jest测试React组件内部变量的分支逻辑？

可以测试，但不建议直接针对内部变量编写测试——React组件测试的最佳实践是聚焦组件的输入（props、状态）和输出（渲染结果、副作用），而非内部实现细节。不过如果需要覆盖这类分支，可通过以下几种合理方式处理：

1. 重构代码，抽离可测试的独立逻辑 #

把依赖内部变量的逻辑单独抽成函数，直接测试这个函数的分支，无需依赖组件渲染。比如你的示例可以重构为：

// 抽离独立逻辑
export const checkValues = (a: number, b: number) => {
  if (a !== b) {
    console.log("1");
    return true;
  }
  return false;
};

export default function App() {
  let test1 = 10;
  let test2 = 5;
  
  checkValues(test1, test2);

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

针对抽离的函数编写测试：

import { checkValues } from './App';

describe('checkValues', () => {
  beforeEach(() => {
    jest.spyOn(console, 'log').mockImplementation(() => {});
  });

  afterEach(() => {
    jest.restoreAllMocks();
  });

  test('logs "1" when values are different', () => {
    checkValues(10, 5);
    expect(console.log).toHaveBeenCalledWith("1");
  });

  test('does not log when values are equal', () => {
    checkValues(5, 5);
    expect(console.log).not.toHaveBeenCalled();
  });
});

2. 通过模拟副作用验证分支（配合代码优化） #

如果不想大幅重构，可通过监听内部逻辑产生的副作用（比如console.log）验证分支是否执行。但要覆盖多分支，建议把内部变量改为可配置的props：

export default function App({ test1 = 10, test2 = 5 }) {
  if (test1 !== test2) {
    console.log("1");
  }

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

然后编写测试覆盖两个分支：

import { render } from '@testing-library/react';
import App from './App';

describe('App', () => {
  beforeEach(() => {
    jest.spyOn(console, 'log').mockImplementation(() => {});
  });

  afterEach(() => {
    jest.restoreAllMocks();
  });

  test('logs "1" when test1 !== test2', () => {
    render(<App test1={10} test2={5} />);
    expect(console.log).toHaveBeenCalledWith("1");
  });

  test('does not log when test1 === test2', () => {
    render(<App test1={5} test2={5} />);
    expect(console.log).not.toHaveBeenCalled();
  });
});

3. 强烈不推荐的方式：直接篡改内部变量 #

虽然可以通过jest.mock或AST工具修改组件内部变量，但这种方式极度脆弱——一旦组件内部实现变更（比如变量名修改），测试立刻失效，违背了测试的稳定性原则，因此坚决不建议使用。

核心原则 #

React组件测试应聚焦用户可见的行为，而非内部实现细节。直接测试内部变量会让测试与组件过度耦合，后续重构时需频繁修改测试，大幅降低测试价值。优先通过重构抽离逻辑或让变量可配置（如props）来编写健壮的测试。

内容的提问来源于stack exchange，提问作者Виктория