为什么在这个笑话测试中它的功能顺序很重要? [英] Why does the ordering of it functions matter in this jest test?

问题描述

我有以下内容...

export default class TextInput extends PureComponent<TextInputProps> {

  private handleOnChange = (event: OnChangeEvent): void => {
    if (!this.props.disabled && this.props.onChange) {
      this.props.onChange(event)
    }
  }

  private handleOnBlur = (event: OnBlurEvent): void => {
    if (!this.props.disabled && this.props.onBlur) {
      this.props.onBlur(event)
    }
  }

  public render(): ReactNode {
    return (
      <Styled.TextInput
        id={this.props.id}
        type={this.props.type}
        onChange={this.handleOnChange}
        onBlur={this.handleOnBlur}
        disabled={this.props.disabled}
      />
    )
  }
}

并且正在尝试使用以下测试来测试handleOnChange函数...

And am trying to test the handleOnChange function using the following test...

const mockOnChange = jest.fn((): void => { })
const mockOnBlur = jest.fn((): void => { })

const minHandlerProps ={
  id: 'test',
  type: 'text',
  onChange: mockOnChange,
  onBlur: mockOnBlur,
}

describe('handleOnChange', () => {
  it('Should not call the onChange prop when it\'s been passed and TextInput is disabled', () => {
    const wrapper = shallow(<TextInput {...minHandlerProps} disabled={true} />)
    const instance = wrapper.instance()

    instance.handleOnChange()
    expect(minHandlerProps.onChange).not.toHaveBeenCalled()
  })

  it('Should call the onChange prop when it\'s been passed and TextInput is not disabled', () => {
    const wrapper = shallow(<TextInput {...minHandlerProps} />)
    const instance = wrapper.instance()

    instance.handleOnChange()
    expect(minHandlerProps.onChange).toHaveBeenCalled()
  })
})

按此顺序进行的测试会通过，但是如果我在周围交换订单，则不应调用onChange prop 测试失败.

The tests pass when they are in this order, but if I swap the order around the should not call the onChange prop test fails.

这是因为在这种情况下，onChange属性已经在第一个it()中被调用了吗?

Is this because in this instance, the onChange prop has already been called in the first it()?

我应该为此写一个单独的描述吗?

Am I supposed to write a separate describe for this?

我已经在控制台上记录到道具正确通过并且看起来好像正确，所以我对此行为一无所知.感谢任何可以阐明它的人.

I've console logged that the props are passing correctly and it looks as though they are, so I'm at a loss as to this behaviour. Thanks anyone who can shed some light on it.

推荐答案

通过在describe块之外定义模拟函数，您可以在所有测试之间共享每个实例的单个实例.这意味着您会看到来自其他测试的调用，因此您的测试依赖于顺序(对于单元测试来说，这是非常不好的事情).

By defining the mock functions outside the describe block, you share a single instance of each between all tests. This means you see calls from other tests, so your test are order-dependent (a very bad thing for unit tests).

对此有多种解决方案:

1. 为每个测试创建一个新实例，例如在beforeEach:

describe('handleOnChange', () => {
  let minHandlerProps;
  let mockOnBlur;
  let mockOnChange;

  beforeEach(() => {
    mockOnChange = jest.fn((): void => { })
    mockOnBlur = jest.fn((): void => { })

    minHandlerProps = {
      id: 'test',
      type: 'text',
      onChange: mockOnChange,
      onBlur: mockOnBlur,
    }
  });

  ...
});

使用 mockClear :

Reset each one explicitly between tests with mockClear:

describe('handleOnChange', () => {       
  beforeEach(() => {
    mockOnBlur.mockClear();
    mockOnChange.mockClear();
  });

  ...
});

使用 clearAllMocks 在测试之间显式重置所有模拟:

Reset all mocks explicitly between tests with clearAllMocks:

describe('handleOnChange', () => {       
  beforeEach(() => {
    jest.clearAllMocks();
  });

  ...
});

通过设置 clearMocks 到true.

---

作为旁注，我不建议测试在实例上调用handleOnChange调用模拟函数prop的测试.这就是实现-组件的行为是，当Styled.TextInput更改时，或者当与 进行某些交互时，调用回调>发生组件.模拟这些事件可以使您减少与当前实现的耦合.

---

As a side note, I would not recommend testing that invoking handleOnChange on the instance invokes the mocked function prop. That's the implementation - the behaviour of the component is that the callback is invoked when the Styled.TextInput changes, or better yet when some interaction with that component occurs. Simulating these events leaves you less coupled to your current implementation.

这篇关于为什么在这个笑话测试中它的功能顺序很重要?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！