Enzyme: Pretty format mounted html

Created on 2 Nov 2016 · 10Comments · Source: enzymejs/enzyme

I am using jest and this code works good

    const wrapper = mount(<FancyComponent />)
    expect(wrapper.html()).toMatchSnapshot()
    wrapper.unmount()

except that I want the generated snapshot to be multiline, indented html.

Quite like this without having to use tools like enzyme-to-json

Any clue?

enhancement question

Source

MayasHaddad

👍13

Most helpful comment

In general snapshot testing makes your tests more brittle - I'm not sure it's a good idea to make it more pleasant/easier to use it.

ljharb on 9 Dec 2016

👎12 😄1 👍1

All 10 comments

I think it would be great if this were part of enzyme. Currently enzyme-to-json provides this functionality, but it breaks when coverage testing. react-test-renderer doesn't break when coverage testing, but doesn't provide the nice enzyme api.

So currently there's no good solution when you want to use enzyme and do coverage testing. So +1 for adding this to enzyme.

ismay on 9 Dec 2016

In general snapshot testing makes your tests more brittle - I'm not sure it's a good idea to make it more pleasant/easier to use it.

ljharb on 9 Dec 2016

👎12 😄1 👍1

Is there any objective evidence for that?

ismay on 9 Dec 2016

I have lots of anecdotal experience with it - what happens is that it's not explicit and thus clear what is being tested - ie, what's important - and then, when someone changes something that breaks the snapshot by design, it's very very easy to just check in the new snapshot, and not notice that an unrelated thing you changed broke.

Explicit tests take longer to write, but they're much harder for humans to unintentionally ignore failures with.

ljharb on 9 Dec 2016

Hmm ok. Yeah I can see how that would be problematic. I like using them for more presentational components. Especially the ones that change a lot in structure but still fulfill the same function, where function isn't easily expressed in a test. It's easier for me to check the snapshot than write a test that pretty much describes the markup.

ismay on 9 Dec 2016

@MayasHaddad @ismay fwiw, I'm bringing this functionality into jest-enzyme. It doesn't belong on enzyme itself.