Proposal: Snapshot property matchers for render output

[TLadd]

🚀 Feature Proposal

Property Matchers solve a common issue with snapshot tests, but only work for objects. The proposed feature is to extend that functionality to the rendered output html string as well.

Motivation

The same motivation as it was for object property matchers. Oftentimes, there are properties in rendered html that are non-deterministic. Randomly-generated ids for labels/form controls are a big one. Currently, the only way I know around this is to mock whatever is generating the id to make it deterministic, usually returning a constant value. This can be problematic though if you're using something like react-testing-library to query elements by their label text, since then all ids are identical and it's unclear which label corresponds to which input.

The ability to ignore these fields when deciding if a snapshot matches or not solves this issue.

Example

Similar to object property matchers

it('renders correctly', () => {
  const tree = renderer
    .create(<Link page="http://www.facebook.com">Facebook</Link>)
    .toJSON();
  expect(tree).toMatchSnapshot({
    for: expect.any(String),
    id: expect.any(String),
  });
});

// Snapshot
will check the matchers and pass `
<div>
  <label
    class="form__label color color--cod-gray"
    for=Any<string>
  >
  <input id=Any<string> />
</div>
`;

Pitch

This would make snapshot testing easier for some pretty common cases that currently cause difficulty.

[SimenB]

The way property matchers are implemented today is not transferable to this feature request. It currently replaces the given fields with an asymmetric matcher, then passes through serialisation. I think you'd have to implement your own serialiser to do this, which would replace the fields you want with something deterministic.

Thoughts on how pretty-format's (Jest's serialiser) API would look to support this?

[TLadd]

Thanks for the tip on using a custom serializer. I was indeed able to accomplish what I wanted by writing my own serializer that overrides the attribute value for specific attribute names. I replaced this line

props[attribute.name] = attribute.value;

with

if (attribute.name === "id" || attribute.name === "for") {
  props[attribute.name] = "UNIQUE_ID";
} else {
  props[attribute.name] = attribute.value;
}

Thinking about how pretty-format could make this easier, perhaps a config option propOverrides of the form { [propName: string]: <value to print for name regardless of actual value> } that printProps would then use here. So for this example, propOverrides would be { id: "UNIQUE_ID", for: "UNIQUE_ID" }. printProps seems like the ideal place to handle this, since it is used by the DOMElement, ReactElement, and ReactTestComponent plugins.

[OlegRyzhkov]

any solution for this case?

[glennwidener]

Many components generate random unique id's, so this is a persistent problem with snapshots. Which, properly developed, despite much disparaging, is a highly productive and robust testing methodology - high true positive to false positive ratio, thorough rendering coverage, and easy test maintainability. Especially in conjunction with react-testing-library. I'm currently forced to write a custom serializer.

[adrianbienias]

A workaround can be to replace the part of the string that is random before creating the snapshot.

const stringWithRandomData = `some data with random value`
const stringWithConstantData = stringWithRandomData.replace(/random/, "constant")
expect(stringWithConstantData).toMatchSnapshot()

[SimenB]

At work we generate uuids using uuid, so for snapshots we mock it.

---

In general "replacing something in the snapshot" should be solved with a custom serializer as mentioned above. I don't think there's much to gain by changing pretty-format's API. If there is, please open up a new feature request 🙂

[SimenB]

Oh, we should probably mention this in https://jestjs.io/docs/snapshot-testing. Anyone up for sending a docs PR?