Pretty format mounted html

[MayasHaddad]

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?

[ismay]

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.

[ljharb]

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.

[ismay]

Is there any objective evidence for that?

[ljharb]

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.

[ismay]

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.

[blainekasten]

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

[ismay]

Cool! 👍