are a great new way of testing components but their applicability can go beyond that, and they can be really useful in other contexts too. Snapshots UI In reality with Jest snapshots it’s possible to test and assert the output of any serializable value. Let’s assume the following scenario: we have a list of todos (Array<Obj>) and somewhere in our app we want to be able to filter them by one of it’s attributes. Let’s write a function and some tests for it: ToDos = [{ 'Id': '1', 'Title': 'Shop groceries', 'Status': 'done' },{ 'Id': '2', 'Title': 'Go to gym', 'Status': 'pending' },{ 'Id': '3', 'Title': 'Kill it with fire', 'Status': 'done' },{ 'Id': '4', 'Title': 'Take snapshots', 'Status': 'done' },{ 'Id': '5', 'Title': 'Be awesome', 'Status': 'pending' },]; var function filterTodos(arr, key, term) {return arr.filter(function(obj) {return obj[key] === term});} test('it returns all todos with matching Id',() =>{expect( { 'Id': '1', 'Title': 'Shop groceries', 'Status': 'done' } }) filterTodos(ToDos,'Id', '1')).toBe( ) test('it returns all todos with matching Title',() =>{expect( 'Shop groceries' { 'Id': '1', 'Title': 'Shop groceries', 'Status': 'done' } }) filterTodos(ToDos,'Title', )).toBe( ) test('it returns all todos with matching Status',() =>{expect( { 'Id': '1', 'Title': 'Shop groceries', 'Status': 'done' },{ 'Id': '3', 'Title': 'Kill it with fire', 'Status': 'done' },{ 'Id': '4', 'Title': 'Take snapshots', 'Status': 'done' } }) filterTodos(ToDos,'Done', 1)).toBe( ) Normally when testing a functionality like this, we need a mocked list of todos and then we need to manually assert the expected return value. Everything is working great but, if in the we need to change our data we need to manually update each test. future Let’s say that we’re given a new requirement stating that all todos should have an expiration key with an expiration date. We would then have to manually update our array and the return value of each test case. This can be cumbersome specially in a large app with more complex features. With snapshots we could replicate the same testing scenario as such: ToDos = [{ 'Id': '1', 'Title': 'Shop groceries', 'Status': 'done' },{ 'Id': '2', 'Title': 'Go to gym', 'Status': 'pending' },{ 'Id': '3', 'Title': 'Kill it with fire', 'Status': 'done' },{ 'Id': '4', 'Title': 'Take snapshots', 'Status': 'done' },{ 'Id': '5', 'Title': 'Be awesome', 'Status': 'pending' },]; var function filterTodos(arr, key, term) {return arr.filter(function(obj) {return obj[key] === term});} test('it returns all todos with matching Id',() =>{expect( }) filterTodos(ToDos, 'Id', '1')).toMatchSnapshot() test('it returns all todos with matching Title',() =>{expect( 'Shop groceries' }) filterTodos(ToDos, 'Title', )).toMatchSnapshot() test('it returns all todos with matching Status',() =>{expect( }) filterTodos(ToDos, 'Status', 'done')).toMatchSnapshot() This should give you the following snapshot: // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`it returns all todos with matching Id 1`] = `Array [Object {"Id": "1","Status": "done","Title": "Shop groceries",},]`; exports[`it returns all todos with matching Status 1`] = `Array [Object {"Id": "1","Status": "done","Title": "Shop groceries",},Object {"Id": "3","Status": "done","Title": "Kill it with fire",},Object {"Id": "4","Status": "done","Title": "Take snapshots",},]`; exports[`it returns all todos with matching Title 1`] = `Array [Object {"Id": "1","Status": "done","Title": "Shop groceries",},]`; Then an update to the todos array would cause the tests to fail and produce the following output: If this new output is expected we can replicate this through all the test cases simply by running the ```$ jest — updateSnapshots command, there’s no need to go through each test and update it’s return value. This is why snapshots are really useful for apps with complex and frequently changing requirements and a really great tool for testing, it’s applicability can go far beyond react components. Resources: _Edit description_jest-everywhere.now.sh Jest Everywhere by Sibelius Seraphini

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

Snapshot Testing With Jest — Beyond React components

Too Long; Didn't Read

Luis Vieira

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

Snapshot Testing With Jest — Beyond React components

Too Long; Didn't Read

Luis Vieira

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES