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

Question

I have this Input component that will have prop to show an Error component, I'm struggling to find a solution using enzyme.

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

Tried expect(ErrorInstance.contains(<Error />)).to.equal(true) but won't work.

Answer 1

I have found the easiest way to verify the rendering of a component is to use snapshot testing.

Since you are already using enzyme, just add enzyme-to-json as a dev dependency and add this

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

to your package.json (or just add the "snapshotSerializers" if you already have a "jest" key).

Then in your test you can do the following:

expect(InputContainerInstance).toMatchSnapshot();

enzyme-to-json creates a very nicely formatted snapshot that is easy to verify visually.