reactjs - 测试依赖于其他副作用(或其他测试)的 React Hooks 副作用

Question

我有一个 React Hook，它有一个简单的输入和按钮，如果没有输入，按钮将被禁用，而同一个按钮在启用时执行提取:

function MyComponent() {
  const [ value, setValue ] = useState('')

  function apiRequest() {
    if (!value) {
      return
    }

    axios.get('url')
      .then(console.log)
      .catch(console.log)
  }

  return (
    <div>
      <input onChange={e => setValue(e.target.value)} value={value} />
      <button disabled={!value} onClick={apiRequest}>
        Submit
      </button>
    </div>
  )
}

我用 Enzyme 写了两个测试.第一个测试 disabled prop 是否正确，第二个测试它是否真的获取。

it('sets the disabled prop appropriately', function() {
    const wrapper = mount(<MyComponent />)
    const input = wrapper.find('input')
    const btn = wrapper.find('button')
    expect(btn.prop('disabled')).toBeTruthy()
    input.simulate('change', 'abc123')
    expect(btn.prop('disabled')).toBeFalsy()
})

it('fetches on submit', function () {
    const wrapper = mount(<MyComponent />)
    const input = wrapper.find('input')
    const btn = wrapper.find('button')
    input.simulate('change', 'abc123')
    btn.simulate('click')
    expect(axios.get).toHaveBeenCalled()
})

但不幸的是，要使第二个测试起作用，需要启用按钮，因此必须先输入文本。所以实际上，第二个测试也在无意中测试了 disabled Prop ，因为如果 disabled Prop 设置不正确，它将失败(onClick 不会触发)。

我关注了 React 的 recommended approach的

test React components without relying on their implementation details

这是react-testing-library的核心原则，所以我纯粹是在测试副作用。我正在使用 enzyme 而不是那个，因为我的团队目前正在使用 enzyme

我如何才能重写我的第二个测试以便我可以仅测试获取？提前致谢。

编辑:或者更确切地说，有几种方法可以重写它以正确测试提取？

Answer 1

您可以做的一件事是替换 <div>用<form>并添加 onSubmit={e => apiRequest(value)}这样按钮就可以保持禁用状态，并且您仍然可以继续进行测试，而不会引入不必要的外部因素。

此外，移动您的 function apiRequest() {...}在组件之外。它可能需要 value作为参数而不是依赖周围的范围。

// You could even export this separately and make a test exclusively for this
// without also having to test the form itself
function apiRequest ( value ) {
    if (!value) {
      return
    }

    axios.get('url')
      .then(console.log)
      .catch(console.log)
}

function MyComponent() {
  const [ value, setValue ] = useState('')

  return (
    <form onSubmit={e => { e.preventDefault(); apiRequest(value); }}>
        <input onChange={e => setValue(e.target.value)} value={value} />
        <button disabled={!value}>
            Submit
        </button>
    </form>
  )
}