Question

我有这个Input组件，可以显示一个Error组件，我正在努力寻找一种使用酶的解决方案。

import Error from './Error'
const inputShallow = (props = {}) => shallow(<Input {...props} />)

describe.only('when there is an error', () => {
        beforeEach(() => {
          props.error = 'This is an error'
          InputContainerInstance = inputShallow(props)
          ErrorInstance = InputContainerInstance.children().find(
            `.error`
          )
        })
        it('Should contain the "Error" component', () => {
          //what to do here hmmm??
        })
      })

尝试了expect(ErrorInstance.contains(<Error />)).to.equal(true)，但是无效。

Answer 1

我发现验证组件渲染的最简单方法是使用快照测试。

由于您已经在使用酶，因此只需添加enzyme-to-json作为开发依赖项并添加

"jest": {
  "snapshotSerializers": [
    "enzyme-to-json/serializer"
  ]
}

到您的package.json中（或者如果您已经有一个“笑话”键，只需添加“ snapshotSerializers”）。

然后在测试中，您可以执行以下操作：

expect(InputContainerInstance).toMatchSnapshot();

enzyme-to-json创建了一个格式很好的快照，易于直观地进行验证。

酶断言作为孩子的反应成分

1 个答案: