GSoC’21 with SCoRe Lab: Week-3

Hi Folks! I hope you all are doing great.

Here is my Blogpost for Week-3 of the Coding Period.
Last week went amazing. I worked upon some essential and vital features of my Project which is the Implementation of the Query Screen thatIi have discussed in the last Blog.

In case If you haven’t checked out my week-2 blog:- GSoC’21 with SCoRe
Lab: Week-2

During this week, I didn’t do much development work.
So my targeted plan for this week-3 was all about testing!

TBH I have listened to testing but had zero knowledge about it. So this whole week went in finding the resources, researching about testing, and basic implementation of the same.

What is Testing?

Testing is basically a process to evaluate, whether your code matched the output that is meant to give. You write some test which gives the output Passed or Failed to depend upon that your test output matches to the required output.

Why Testing is Important?
Testing is quite important when you are developing a project because it basically determines the quality of the code and Project. How?

• It helps in gaining the scalability of the project
• Makes the project Bug Free
• Improves the quality of the Project
• Enhance the Performance of the Project
• Enhance Reliability and Productivity, etc.

There are several types of testing one can do like:-

• Unit Testing
• Integration Testing
• SnapShot Testing
• End to End Testing, etc.

So I am going to initially implement Snapshot Testing in my Project, which is basically a Component/ UI Testing.

What is Snapshot Testing?

So during this week, I researched about Testing, and on initial step decided to implement Snapshot Testing which is also called Testing Rendered Output.

Snapshot Testing is basically Component-based testing, in which you write some tests based upon Components(User Interface).

import React from ‘react’;
import App from ‘../src/App’;
import renderer from ‘react-test-renderer’;
jest.useFakeTimers();
test(“renders App Screen correctly”, () => {
const tree = renderer.create(<App />).toJSON();
expect(tree).toMatchSnapshot();
})

So here is the Basic Example of Snapshot testing. Here in this code, we are testing the App component. When running the test, this test automatically creates the Snapshot of that Component as a file, which in terms is cross-checked with the snapshot file whenever any changes are made. If the new changes give the same snapshot as in the snapshot file, then the test is marked as passed or otherwise it is marked as failed.

Here is the example of the Snapshot file which is automatically generated when tested:-

<Text
 style={
 Object {
 “fontSize”: 20,
 “textAlign”: “center”,
 }
 }>
 Welcome to React Native!
</Text>

A “Component Snapshot” is a JSX-like string created by a custom React serializer built into Jest. This serializer lets Jest translate React component trees to string that’s human-readable. Put another way: a component snapshot is a textual representation of your component’s render output generated during a test run.

That’s what I learned throughout this week.

Related Issue:-https://github.com/scorelab/Ask-SCoRe/issues/22
Related Pull Request:- https://github.com/scorelab/Ask-SCoRe/pull/23

My Mentors Shehand and Wathsara also suggested few resources for testing:
https://reactnative.dev/docs/testing-overview

Conclusion

This week went amazing. I explored a lot of new things. I would like to thank my mentors (Shehand, Wathsara) for their constant help, support, and advice.

Thank you so much for reading! Stay Safe😇

For any queries, you can reach me out on LinkedIn