Question

我想知道是否有办法使用Jest的快照测试不在道具中的内部组件功能？

对于这个组件：

class Comp extends Component {
  state = {
    ...
  }

  handleSomething = () => {
    doSomething()
  }

  render() {
    return (
      <div>
        { this.props.foo }
        <ChildComp onClick={ this.handleSomething } />
      </div>
    )
  }
}
export default Comp

我正在尝试做这样的事情：

test('Comp', () => {
  const component = renderer.create(
    <Comp foo="bar" />
  )

  let tree = component.toJSON()
  expect(tree).toMatchSnapshot()

  tree.props.handleSomething() // TypeError: tree.props.handleSomething is not a function
  tree = component.toJSON()
  expect(tree).toMatchSnapshot()
})

但是我收到类型错误，因为handleSomething不是组件道具。

有没有办法使用快照测试此功能？

Answer 1

您可以使用enzyme呈现组件并触发点击ChildComp。

import { shallow } from 'enzyme'

test('Comp', () => {
  const component = shallow(
    <Comp foo="bar" />
  )

  component.find('ChildComp').simulate('click')
  expect(component).toMatchSnapshot()
})

请注意，您需要enzyme-to-json才能使快照功能正常工作

使用Jest的快照测试内部函数

1 个答案: