Question

我有以下测试，用于测试按钮单击时回调方法的调用，并将传递的参数作为我的Estimate组件的文本输入的值。

测试：

let obj
let fn
describe('Estimate tests', () => {
  beforeAll(() => {
    fn = jest.fn()
    obj = mount(<Estimate onPress={fn} />)
  })

  afterAll(() => {
    obj.unmount()
  })

  test('Button click returns text input value', () => {
    obj.find('TextInput').first().simulate('change', { target: { value: 61606 } })
    obj.find('Button').first().simulate('click')
    expect(fn).toHaveBeenCalledWith(61606)
  })
})

Estimate.jsx：

export class Estimate extends PureComponent {
  render () {
    const { onPress } = this.props

    // @todo remove the excess margin and spacing above this component
    return (
      <Form
        name="estimateForm"
        ref={(ref) => {
          this.estimateForm = ref
        }}
      >
        <Actions style={{ alignItems: 'flex-end' }}>
          <Button
            type="text"
            style={{ marginBottom: -em(0.5) }}
            onPress={() => onPress(this.estimateForm.values)}
            title={t('estimateShippingAndTax')}
          />
          <TextInput
            placeholder={t('postalCode')}
            name="estimate"
            style={{ width: 100 }}
            validate="postalCode"
          />
        </Actions>
      </Form>
    )
  }
}

这将返回：

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

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

  31 |     obj.find('TextInput').first().simulate('change', { target: { value: 61606 } })
  32 |     obj.find('Button').first().simulate('click')
> 33 |     expect(fn).toHaveBeenCalledWith(61606)
     |                ^
  34 |   })
  35 | })
  36 |

这是怎么回事？ onPress与按下的按钮关联。甚至没有被调用。

Answer 1

由于您在uncontrolled component上进行模拟更改（与调用target.props.onChange(...)相同），因此无法正常工作。

对于面向Web的应用程序，可以通过更改.value而不是simulate('change', ...)来完成，但是由于它是React Native，其controlled component中的TextInput应该提供显式的onChange / onChangeText处理程序。这样您就可以像使用simulate('change')一样。

我要强调的最后一件事：对于受控成分，必须像这样在酶的包装上调用.update()：

test('Button click returns text input value', () => {
    obj.find('TextInput').first().simulate('change', { target: { value: 61606 } });
    obj.update();
    obj.find('Button').first().simulate('click');
    expect(fn).toHaveBeenCalledWith([61606]); // also here you will retrieve array with values not single one
})

[UPD]实际上是通过ref以不受控制的方式输入TextInput的值can be set up（但我相信以受控方式使用它会更好）：

obj.instance()._textInputRefYouShouldBound.setNativeProps({text: '61606'});
obj.find('Button').first().simulate('click')
expect(fn).toHaveBeenCalledWith(['61606'])

未调用按钮单击事件回调-玩笑/酶

1 个答案: