reactjs - 无法模拟反应组件道具的功能

Question

我正在为 Jest 的反应组件编写 UT。我无法模拟反应组件道具的功能。

这是开发代码

// dev code 
class export class NamespaceRow extends Component {
  // omit some code here 
  toggleNs = () => {
    const { fetchTables } = this.props
    const { id } = namespace
    fetchTables(dsId, id)
    this.setState({ expanded: true })
  }
 // omit some code here
}
function mapDispatchToProps(dispatch) {
  return {
    fetchTables: bindActionCreators(getTables, dispatch),
  }
}

const mapStateToProps = (state, ownProps) => {
  return {
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(NamespaceRow)

这是UT代码。

describe('NamespaceRow/index.test.js', () => {
  let store
  let component
  let instance
  let props
  beforeEach(() => {
    store = mockStore({})
    props = {}
    component = renderer.create(
      <Provider store={store}>
        <NamespaceRow {...props} />
      </Provider>
    )
// get the component instance
    instance = component.root.children[0].children[0].instance
  })
// test code A
it('when calling toggleNS', () => {
  instance.props = {
    ...instance.props,
    fetchTables: jest.fn(),
  }
// toggleNs is called successfully
  instance.toggleNs()
// TypeError: Cannot read property 'calls' of undefined
  expect(instance.props.fetchTables.mock.calls.length).toEqual(1)
})
})

如果我在下面稍微更改 UT 代码。有用！

// test code B
it('when calling toggleNS', () => {
  const mockFetchTables = jest.fn()
  instance.props = {
    ...instance.props,
    fetchTables: mockFetchTables,
  }
  instance.toggleNs()
  expect(mockFetchTables.mock.calls.length).toEqual(1)
}

那么为什么测试代码 A 失败而测试代码测试 B 通过呢？

更新：

经过进一步调查，我发现这个问题与我的另一个问题重复，setState 让我无法从 mapDispatchToProps 模拟组件道具功能

所以我将关闭/删除/标记为重复。

标签： reactjsunit-testingreact-reduxjestjs