Replace snapshot tests

[penx]

I am pretty sure that the use of Jest snapshots in govuk-frontend is mainly due to their ease of implementation - and could be replaced by tests that use axiom to look for specific properties of the render output.

Using snapshots means that if a change is made that introduces a white space change or changes the html attribute order, according to the snapshot test this is a failure - generally I would say this is a false positive.

This is of particular concern when developing a port and wanting to ensure the port adheres to all of the same unit tests for templates - the snapshots files are hard to manage across projects and raise false positives.

Related:

• https://github.com/penx/govuk-frontend-template-spec
• https://github.com/penx/govuk-frontend-react
• https://github.com/alphagov/govuk-frontend/issues/1095

Some articles against snapshot testing:

• https://engineering.ezcater.com/the-case-against-react-snapshot-testing
• https://medium.com/@ntgard/jest-snapshot-testing-the-bad-parts-c93aca187ba5
• http://randycoulman.com/blog/2016/09/06/snapshot-testing-use-with-care/

From the first link

We've found that in practice, snapshot tests end up making assertions that aren't clearly represented in the test output. The assertion tries to focus on a very specific behavior or attribute, but because the test renders the entire component, it regularly leads to tests that fail for unrelated reasons. It's not immediately clear whether something is actually wrong, especially for developers who are unfamiliar with the component.

[NickColley]

We're generally using snapshots tests to sanity check any composed components that we pass params to, so we're not duplicating the testing we've already done in the specific component tests.

Worth a look to see if we can do this in a friendlier way for porting.