Jest Snapshots fail on SVG props

user_7433760 0
Viewed 1330

Jest snapshot test fail when including Fontawesome-React icon components. I don't pass a title or aria-labelledby to the SVG components, and even when I do pass it those props, the snapshot continues to hash the props. Tests fail to pass since a new hash is generated in those two props every time the tests run.

"@fortawesome/react-fontawesome": "^0.1.4",

"jest": "^23.6.0",

        <svg
    -     aria-labelledby="svg-inline--fa-title-y4Cv9dkIlhtu"
    +     aria-labelledby="svg-inline--fa-title-gIn5ZJBsxixz"
          className="svg-inline--fa fa-user-circle fa-w-16 fa-1x "
          color="whitesmoke"
          data-css-knsav2=""
          data-icon="user-circle"
          data-prefix="fas"
    @@ -23,11 +23,11 @@
          }
          viewBox="0 0 496 512"
          xmlns="http://www.w3.org/2000/svg"
        >
          <title
    -       id="svg-inline--fa-title-y4Cv9dkIlhtu"
    +       id="svg-inline--fa-title-gIn5ZJBsxixz"
            style={Object {}}
          >
            User Profile
          </title>
font-awesome jestjs reactjs svg javascript
2 Answers

Our solution was to create a jest.mock for the svg components we were importing. Ultimately, we don't want to test foreign libraries in our own tests, so this was the accepted solution for us.

For example:

jest.mock('@materialui/icons', () => ({ 
    SomeIcon: () => <div>SomeIconHere</div>,
    // etc...
});

This helps keep our snapshot tests stable.

user_74337600
user_18277340
Related