如何测试 useState 是否已被调用或按钮是否已被单击？

您不应该模拟 React.useState() 钩子，并测试事件处理程序的实现细节。您应该测试组件的行为。行为是，例如，当状态改变时，视图会发生什么。

例如

App.tsx：

import { Grid } from './Grid';
import React from 'react';
import { RiskSelector } from './RiskSelector';
import { Portfolio } from './Portfolio';

const home = 'http://localhost:3000/home.png';

export function App(): JSX.Element {
  const [step,setStep] = React.useState(0);
  return (
    <main>
      <Grid centerAlign>
        <button id="home-button" onClick={() => setStep(0)}>
          <img src={home} alt="home button" />
        </button>
        <h1>Financial Advisor</h1>
      </Grid>
      {step === 0 && <RiskSelector continue={() => setStep(1)} />}
      {step === 1 && <Portfolio />}
    </main>
  );
}

Grid.tsx：

import React from 'react';

export function Grid({ children,centerAlign }) {
  return <div>{children}</div>;
}

Portfolio.tsx：

import React from 'react';
export function Portfolio() {
  return <div>Portfolio</div>;
}

RiskSelector.tsx：

import React from 'react';

export function RiskSelector({ continue: onContinue }) {
  return <div onClick={onContinue}></div>;
}

App.test.tsx：

import React from 'react';
import { App } from './App';
import { shallow } from 'enzyme';
import { Portfolio } from './Portfolio';
import { RiskSelector } from './RiskSelector';

describe('67412919',() => {
  let wrapper: any;

  beforeEach(() => {
    wrapper = shallow(<App />);
  });
  afterEach(() => {
    jest.clearAllMocks();
  });

  describe('Home button clicked',() => {
    it('calls setStep with 0',() => {
      wrapper.find('button').simulate('click');
      expect(wrapper.find(RiskSelector)).toHaveLength(1);
    });

    it('calls setStep with 1',() => {
      wrapper.find(RiskSelector).invoke('continue')();
      expect(wrapper.find(Portfolio)).toHaveLength(1);
      expect(wrapper.find(RiskSelector)).toHaveLength(0);
    });
  });
});

100% 覆盖 App.tsx 文件的单元测试结果。

 PASS  examples/67412919/App.test.tsx (7.433 s)
  67412919
    Home button clicked
      ✓ calls setStep with 0 (24 ms)
      ✓ calls setStep with 1 (12 ms)

------------------|---------|----------|---------|---------|-------------------
File              | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s 
------------------|---------|----------|---------|---------|-------------------
All files         |   84.21 |      100 |      50 |   84.21 |                   
 App.tsx          |     100 |      100 |     100 |     100 |                   
 Grid.tsx         |   66.67 |      100 |       0 |   66.67 | 4                 
 Portfolio.tsx    |   66.67 |      100 |       0 |   66.67 | 3                 
 RiskSelector.tsx |   66.67 |      100 |       0 |   66.67 | 4                 
------------------|---------|----------|---------|---------|-------------------
Test Suites: 1 passed,1 total
Tests:       2 passed,2 total
Snapshots:   0 total
Time:        7.958 s,estimated 8 s

不仅仅是用户只关心 UI，功能组件的测试也只关心 UI :)。换句话说，测试不断变化的渲染内容，而不是函数的实现。

因此，模拟该按钮点击并测试是否呈现 RiskSelector 或 Portfolio。