1

I'm modifying a Jest test which looks like this:

it("footer exists as expected", () => {
  const tree = renderer.create(<Footer />).toJSON()
  expect(tree).toMatchSnapshot()
})

The snapshot looks like this:

// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing

exports[`test header consistency  footer exists as expected 1`] = `
<footer
  className="makeStyles-footer-1"
  id="footer"
  role="contentinfo"
>
  <div
    className="makeStyles-content-2"
  >
    <div>
      ... (version number within a nested HTML element)
</footer>
`;

Nested within the HTML is a version number that I'd like to exclude from the snapshot comparison. How could this be done? (Am looking for the simplest way.)

Note: Did come across a small bit of Jest documentation which looked promising but only excluded an example for a simple JSON object: https://jestjs.io/docs/snapshot-testing#property-matchers - and this answer does similar. Could this be adapted for a nested HTML structure?

Steve Chambers
  • 37,270
  • 24
  • 156
  • 208
  • toJSON returns an object and you can modify it the way you need to process a snapshot. I'm not sure if there are tools that do this for you. – Estus Flask Apr 19 '21 at 11:56
  • Where does that version number _come from_? – jonrsharpe Apr 19 '21 at 12:23
  • So looking at the JSON (thanks @EstusFlask), the version number would be in the following place: `tree.children[0].children[0].children[1].children[0].children[1]`. So I tried `expect(tree).toMatchSnapshot({ children[0].children[0].children[1].children[0].children[1]: expect.any(String)})` but square brackets aren't allowed... – Steve Chambers Apr 19 '21 at 12:51
  • @jonrsharpe See above - the version number is the text in a nested HTML element (with the following xpath if it helps: `//*[@id="footer"]/div/div/p[1]/a/text()[2]`) – Steve Chambers Apr 19 '21 at 12:54
  • Yes, I understand that it's _shown_ in the footer, I'm asking: where does the component get it from to show it? Is it hard-coded in the component (and if so how and when does it get updated)? If it is (or can be) externalised to a prop or context then it becomes trivial to control it in the test. – jonrsharpe Apr 19 '21 at 12:56
  • Oh I see. It comes from the package.json file and gets updated every time we do a release. What I'm trying to fix is the test failing due to an upgrade - it should just ignore the version number but check everything else. Would ideally still want to carry on with snapshots in the same way as before (e.g. generating them with `jest -u`) - just ignore this very specific thing in the snapshot. – Steve Chambers Apr 19 '21 at 12:58
  • 1
    Got it!! Thanks @jonrsharpe I now understand where you were coming from. Added the following *before* the expect call and the test is now working: `tree.children[0].children[0].children[1].children[0].children[1] = \`{version}\``. (If you'd like to formulate this as an answer I'll gladly accept...) – Steve Chambers Apr 19 '21 at 13:12
  • 1
    The direction I was coming from was more that if you have e.g. `import { version } from "path/to/package.json"` then you can `jest.mock("path/to/package.json")` and provide a fixed value for the tests rather than relying on it being stable elsewhere. – jonrsharpe Apr 19 '21 at 13:19
  • Yes, you can replace it with a placeholder. I don't think it's necessary to put the exact value there, at least if you have more specific test to assert that. – Estus Flask Apr 19 '21 at 13:23
  • Thanks @jonrsharpe. Mocking does seem the best way to go, any further advice on how to do this? Tried this but it doesn't work: `jest.mock("../../../../package.json", () => { version: "dummyVersion" })` – Steve Chambers Apr 19 '21 at 14:34
  • 1
    That's feasibly just a syntax mistake; an arrow function returning an object looks like `() => ({ this })`, otherwise the braces indicate the function body. Aside from that I'd need to see a [mre]. – jonrsharpe Apr 19 '21 at 14:36
  • Perfect, that was exactly the issue - thanks so much for your help with this @jonrsharpe. – Steve Chambers Apr 19 '21 at 16:00

0 Answers0