Question

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

这是开发人员代码

// 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)
}

那为什么测试代码B通过时测试代码A失败了？

更新：

经过进一步调查，我发现这个问题与另一个问题setState makes me fail to mock a component prop function from mapDispatchToProps

重复

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

无法模拟React组件道具的功能

更新：

0 个答案: