Dynamic Snapshot Testing

Dynamic Snapshot Testing

when to use snapshot testing
what is snapshot testing
react testing-library snapshot
snapshot testing enzyme
snapshot testing vs unit testing
snapshot-diff
jest update snapshot for one test
react-snapshot

I have a time differences function that gets a date and calculates it differences with the current time and return time differences like:

4 days ago

Now, I used this function on a web page with some Unit test and Snapshot test. Snapshot testing will fail every day because tomorrow the differences will be 5 days ago

What can I do in this situation?

Update: put my pseudo code

const timeDiff = gTime => {
    return (currentTime - gtime) 
};

This function will invoke in my web page, components, comment section and ... so all my component's snapshot test will fail.


You need to mock the Date object so it always returns the same time.

https://jestjs.io/docs/en/snapshot-testing#2-tests-should-be-deterministic

https://jestjs.io/docs/en/mock-functions

Snapshot Testing · Jest, Snapshot Testing. Snapshot tests are a very useful tool whenever you want to make sure your UI does not change unexpectedly. A typical snapshot test case for  In a nutshell, snapshot tests compare a realtime snapshot of the view (after it’s been laid out) and compares it to an existing recorded snapshot (the “test oracle”), failing the test if anything


You may have 2 options:

1- consider if you had a null input (or something like that), in this scenario what would your component return, so by changing your function you can give your function a null input and expect to get an expected result.

const timeDiff = gTime => {
    if(!gTime) return "";
    return (currentTime - gtime)  };   

// ------------test---------------

timeDiff(null)

2- give an input that will return an expected result, for example in your scenario you could give current time as input (as mock data) so every time you will get a 0-second difference in your result.

const timeDiff = gTime => {
    return (currentTime - gtime) 
};

// ------------test---------------

mockData = getCurrentTime()
timeDiff(mockData)

Picture this: snapshot testing, Snapshots are trivial to use, they can easily be updated, and they provide full coverage of your components, dynamic behavior included. How do  Snapshot tests are a very useful tool whenever you want to make sure your UI does not change unexpectedly. A typical snapshot test case for a mobile app renders a UI component, takes a snapshot, then compares it to a reference snapshot file stored alongside the test. The test will fail if the two snapshots do not match: either the change is unexpected, or the reference snapshot needs to be updated to the new version of the UI component.


Totally I found the answer. I use a third-party library for time manipulations. I used this library inside of my react component ( consider import in a js file).

So I couldn't mock the data for this library.

eventually, I decided to remove the import of this third-library from my file, and passe a function (known as props in react.js) to my component.

Now I can easily pass a mock data to this component and my problem solved.

How to test the snapshot of UI with changing ids like chart or primary , Learn how to snapshot test the react component in 3 ways - 1. Mocking the dynamic function 2. Passing the dynamic value as prop 3. Using the  This is the definition of snapshot testing! I factored out the snapshot save / load logic into snap-shot-core and made schema-shot. Schema-shot saves the trained schema the first time it is called for a given location (derived automatically from the call stack). Every time after that, the schema is used to check the object's compliance.


The case against React snapshot testing, Our takeaways from experimenting with React snapshot testing at like environment-based URLs and dynamically generated class names. Before snapshot testing I would always write a silly regex that got the basic gist of what the message should say, but with snapshot testing it's so much easier. Here's an example of this from kcd-scripts: Tests; Snapshot output; babel-plugin-tester. I honestly don't know how I'd test babel plugins with anything but Jest snapshot testing.


bahmutov/snap-shot: Jest-like snapshot feature for the rest , Tests with dynamic names. Sometimes tests are generated dynamically without hardcoded names. In this case SHA256 of the test callback function is used to find  We will talk about Snapshot Testing, a style of testing which removes much of the manual coding and boilerplate, leaving the test runner to compare the produced result against a saved snapshot.


Snapshot testing Dynamic Type - Kin + Carta Created, In case you don't know what snapshot testing is, it's a really fast way to not only test that your view lays out correctly without needing to run the  The initial execution of a test case creates a screenshot of the view we’re interested in. It’s then saved to disk as a PNG “reference image”. Subsequent executions of the same test case compare a newly generated screenshot with the saved reference image. The test case fails if the images aren’t identical.