jest snapshot testing: how to ignore part of the snapshot file in jest test results

Question

Problem: ignore some part of the .snap file test results

the question here: there are some components in my test that have a random values and i don't really care about testing them. is there any way to ignore part of my X.snap file? so when i run tests in the future it won't give me test fail results.

Answer 1

Now you can also use property matcher for these cases.

By example to be able to use snapshot with these object :

const obj = {
  id: dynamic(),
  foo: 'bar',
  other: 'value',
  val: 1,
};

You can use :

expect(obj).toMatchSnapshot({
  id: expect.any(String),
});

Jest will just check that id is a String and will process the other fields in the snapshot as usual.

Answer 2

Actually, you need to mock the moving parts.

As stated in jest docs:

Your tests should be deterministic. That is, running the same tests multiple times on a component that has not changed should produce the same results every time. You're responsible for making sure your generated snapshots do not include platform specific or other non-deterministic data.

If it's something related to time, you could use

Date.now = jest.fn(() => 1482363367071);

Answer 3

I know it's quite old question but I know one more solution. You can modify property you want to ignore, so it will be always constant instead of random / dynamic. This is best for cases when you are using third party code and thus may not be able to control the non deterministic property generation
Example:

import React from 'react';
import Enzyme, { shallow } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import Card from './Card';
import toJSON from 'enzyme-to-json';

Enzyme.configure({ adapter: new Adapter() });

describe('<Card />', () => {
    it('renders <Card /> component', () => {
        const card = shallow(
            <Card
                baseChance={1}
                name={`test name`}
                description={`long description`}
                imageURL={'https://d2ph5fj80uercy.cloudfront.net/03/cat1425.jpg'}
                id={0}
                canBeIgnored={false}
                isPassive={false}
            />
        );
        const snapshot = toJSON(card);

        // for some reason snapshot.node.props.style.backgroundColor = "#cfc5f6" 
        // does not work, seems the prop is being set later
        Object.defineProperty(snapshot.node.props.style, 'backgroundColor', { value: "#cfc5f6", writable: false });

        // second expect statement is enaugh but this is the prop we care about:
        expect(snapshot.node.props.style.backgroundColor).toBe("#cfc5f6");
        expect(snapshot).toMatchSnapshot();
    });
});

Answer 4

You can ignore some parts in the snapshot tests replacing the properties in the HTML. Using jest with testing-library, it would look something like this:

it('should match snapshot', async () => {
  expect(removeUnstableHtmlProperties(await screen.findByTestId('main-container'))).toMatchSnapshot();
});

function removeUnstableHtmlProperties(htmlElement: HTMLElement) {
  const domHTML = prettyDOM(htmlElement, Infinity);
  if (!domHTML) return undefined;
  return domHTML.replace(/id(.*)"(.*)"/g, '');
}

Answer 5

I used this to override moment's fromNow to make my snapshots deterministic:

import moment, {Moment} from "moment";

moment.fn.fromNow = jest.fn(function (this: Moment) {
  const withoutSuffix = false;
  return this.from(moment("2023-01-12T20:14:00"), withoutSuffix);
});