如何在反应挂钩中对来自组件的 stateChange 回调进行单元测试？

Question

我正在编写单元测试并想测试来自组件的状态更改回调。

单元测试代码

import React from 'react';
import {configure} from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import NameTextField from './NameTextField';
import TextField from '@material-ui/core/TextField';
import {createShallow} from '@material-ui/core/test-utils';
import {act} from 'react-dom/test-utils';

configure({adapter: new Adapter()});

describe('<NameTextField />', () => {
  let shallow;

  beforeAll(() => {
    shallow = createShallow();
  });
  let wrapper;
  beforeEach(() => {
    wrapper = shallow(<NameTextField onStateChange={handleStateChange}/>);
  });


  const handleStateChange = updatedState => {
  };


  it('should show no error when correctly entered', () => {
    const handleStateChange = jest.fn()

    act(() => {
      wrapper.find(TextField).at(0).simulate('blur', {target: {value: 'correct name'}});
    });
    wrapper.update();
    expect(wrapper.find(TextField).at(0).props().error).toBe(
        false);
    expect(wrapper.find(TextField).at(0).props().helperText).toBe(
        null);
    expect(handleStateChange).toHaveBeenCalledWith('10')

  });

});

我在这里有 NameTextField 组件，根据它在 Textfield 上的输入，我得到 onStateChange 回调。

<NameTextField onStateChange={handleStateChange}/>

当我使用

进行测试时

    expect(handleStateChange).toHaveBeenCalledWith('10')

我收到错误消息

Error: expect(jest.fn()).toHaveBeenCalledWith(expected)

Expected mock function to have been called with:
  ["10"]
But it was not called.

如何捕获组件上的 stateChange 回调？

Answer 1

我一发帖就找到了答案。

简单的错误。

import React from 'react';
import {configure} from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import NameTextField from './NameTextField';
import TextField from '@material-ui/core/TextField';
import {createShallow} from '@material-ui/core/test-utils';
import {act} from 'react-dom/test-utils';

configure({adapter: new Adapter()});

describe('<NameTextField />', () => {
  let shallow;

  beforeAll(() => {
    shallow = createShallow();
  });
  let wrapper;
  beforeEach(() => {
    wrapper = shallow(<NameTextField onStateChange={handleStateChange}/>);
  });


    const handleStateChange = jest.fn();


  it('should show no error when correctly entered', () => {

    act(() => {
      wrapper.find(TextField).at(0).simulate('blur', {target: {value: 'correct name'}});
    });
    wrapper.update();
    expect(wrapper.find(TextField).at(0).props().error).toBe(
        false);
    expect(wrapper.find(TextField).at(0).props().helperText).toBe(
        null);
    expect(handleStateChange).toHaveBeenCalledWith('10')

  });

});

const handleStateChange = jest.fn();

有重复的 handleStateChange。

如何在反应挂钩中对来自组件的 stateChange 回调进行单元测试？

How do I unit test stateChange callback from the component in react hooks?

reactjs

jestjs

enzyme

react-hooks