在应用程序中工作时，Jest 中未更新 React 状态

Question

当我单击按钮时，它会将值增加输入中写入的数量，当我在应用程序中执行此操作时它会起作用，但是当我尝试使用 Jest 并且首先 fireEvent.change() 将输入的值设置为 10 然后fireEvent.click() 在按钮上它不会增加它并且值保持在0。

这是我得到的错误：

expect(received).toBe(expected) // Object.is equality

   Expected: 10
   Received: 0

     33 |     fireEvent.click(btnPlus);
     34 |
   > 35 |     expect(parseInt(val.textContent)).toBe(10);
        |                                       ^
     36 |   });
     37 | });
     38 |

这里是测试文件：

import React from 'react';
import Counter from './Counter';
import { render, fireEvent } from '@testing-library/react';
describe('Counter works', () => {
  let comp;
  let inp;
  let btnPlus;
  let val;
  beforeAll(() => {
    comp = render(<Counter />);
    inp = comp.getByTestId('inp');
    btnPlus = comp.getByTestId('btn-+');
    val = comp.getByTestId('counter-value');
  });

  it('Counter exists', () => {
    expect(comp).toBeTruthy();
  });
  it('Input works', () => {
    expect(inp.value).toBe('');

    fireEvent.change(inp, {
      target: {
        value: 10,
      },
    });

    expect(parseInt(inp.value)).toBe(10);

    fireEvent.click(btnPlus);

    expect(parseInt(val.textContent)).toBe(10);
  });
});

通用计数器文件：

const Counter = () => {
  const [state, setState] = useState({
    count: 0,
    inpText: '',
  });
  const setNum = (num) => {
    setState((prev) => {
      return {
        ...prev,
        count: prev.count + num,
      };
    });
  };
  const setInp = (e) => {
    setState((prev) => {
      return {
        ...prev,
        inpText: e?.target.value,
      };
    });
  };
  return (
    <>
      <h1
        data-testid='counter-value'
        style={{
          color: 'white',
          position: 'absolute',
          top: '45%',
          left: '50%',
          transform: 'translate(-50%,-60%)',
        }}>
        {state.count}
      </h1>
      <div id='flex'>
        <Button setNum={setNum} plus='+' num={parseInt(state.inpText)} />
        <input data-testid='inp' value={state.inpText} onChange={setInp} />
        <Button setNum={setNum} plus='-' num={-parseInt(state.inpText)} />
      </div>
    </>
  );
};

还有按钮：

const Button = (props) => {
  return (
    <button
      data-testid={`btn-${props.plus}`}
      onClick={() => {
        props.setNum(props.num);
      }}>
      {props.plus}
    </button>
  );
};

Answer 1

我建议避免在 beforeAll/beforeEach 函数中设置初始组件。每个测试用例都应该独立运行，不受其他测试中执行的操作的影响。

相反，使用该逻辑创建一个辅助函数并在每次测试时调用它。

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

describe('Counter works', () => {
    let comp;
    let inp;
    let btnPlus;
    let val;
  
    const renderComponent = () => {
        comp = render(<Counter />);
        inp = comp.getByTestId('inp');
        btnPlus = comp.getByTestId('btn-+');
        val = comp.getByTestId('counter-value');
    }

    it('Counter exists', () => {
        renderComponent();
        expect(comp).toBeTruthy();
    });
  
    it('Input works', () => {
        renderComponent();
        expect(inp.value).toBe('');
        fireEvent.change(inp, { target: { value: 10 } });
        expect(inp.value).toBe('10');
        fireEvent.click(btnPlus);
        expect(val.textContent).toBe('10');
    });
});