As your codebase expands, small errors and edge cases you don’t expect can cascade into larger failures. Bugs lead to bad user experience and ultimately, business losses. One way to prevent fragile programming is to test your code before releasing it into the wild.
There is more value in testing than you might realize. One of the best ways to fix a bug in your code is to write a failing test that exposes it. Then when you fix the bug and re-run the test, if it passes it means the bug is fixed, never reintroduced into the code base.
The default template of React Native ships with Jest testing framework. It includes a preset that's tailored to this environment so you can get productive without tweaking the configuration and mocks straight away—more on mocks shortly. You can use Jest to write all types of tests featured in this guide.
Your tests should be short and ideally test only one thing.
The test in the image is described by the string passed to the
it function. Take good care writing the description so that it’s clear what is being tested. Do your best to cover the following:
This is also known as AAA (Arrange, Act, Assert).
describe function to help structure your tests. Use
describe to group together all tests that belong to one functionality. Describes can be nested, if you need that. Other functions you'll commonly use are
beforeAll that you can use for setting up the objects you're testing.
If your test has many steps or many expectations, you probably want to split it into multiple smaller ones. Also, ensure that your tests are completely independent of one another. Each test in your suite must be executable on its own without first running some other test.
Unit tests cover the smallest parts of code, like individual functions or classes.
The great thing about unit tests is that they are quick to write and run. Therefore, as you work, you get fast feedback about whether your tests are passing.
In integration testing, real individual units are combined (same as in your app) and tested together to ensure that their cooperation works as expected. This is not to say that mocking does not happen here: you’ll still need mocks (for example, to mock communication with a weather service), but you'll need them much less than in unit testing.
For testing React components, there are two things you may want to test:
There are several libraries that can help you testing these:
queryAPIs described in the next paragraph.
Avoid testing implementation details like props or state—while such tests work, they are not oriented toward how users will interact with the component and tend to break by refactoring (for example when you'd like to rename some things or rewrite class component using hooks).
React class components are especially prone to testing their implementation details such as internal state, props or event handlers. To avoid testing implementation details, prefer using function components with Hooks, which make relying on component internals harder.
Snapshot testing is an advanced kind of testing enabled by Jest.
A "component snapshot" is a textual representation of your component’s render output generated during a test run.
With snapshot testing, you typically first implement your component and then run the snapshot test. The snapshot test then creates a snapshot and saves it to a file in your repo as a reference snapshot. The file is then committed and checked during code review.
In end-to-end (E2E) tests, you verify your app is working as expected on a device (or a simulator / emulator) from the user perspective.
This is done by building your app in the release configuration and running the tests against it.
E2E tests give you the highest possible confidence that part of your app is working. The tradeoffs include:
Explore the World’s
Take Your Ideas
Just press play and we take care of the words.
No Internet access? No problem. Within the mobile app, all your ideas are available, even when offline.
2 Million Stashers
Don’t look further if you love learning new things. A refreshing concept that provides quick ideas for busy thought leaders.
Great interesting short snippets of informative articles. Highly recommended to anyone who loves information and lacks patience.
Best app ever! You heard it right. This app has helped me get back on my quest to get things done while equipping myself with knowledge everyday.
This app is LOADED with RELEVANT, HELPFUL, AND EDUCATIONAL material. It is creatively intellectual, yet minimal enough to not overstimulate and create a learning block. I am exceptionally impressed with this app!
Brilliant. It feels fresh and encouraging. So many interesting pieces of information that are just enough to absorb and apply. So happy I found this.
Even five minutes a day will improve your thinking. I've come across new ideas and learnt to improve existing ways to become more motivated, confident and happier.
I have only been using it for a few days now, but I have found answers to questions I had never consciously formulated, or to problems I face everyday at work or at home. I wish I had found this earlier, highly recommended!
Great for quick bits of information and interesting ideas around whatever topics you are interested in. Visually, it looks great as well.
Read & Learn
Access to 200,000+ ideas
Access to the mobile app
Unlimited idea saving & library
Unlimited listening to ideas
Downloading & offline access
Supercharge your mind with one idea per day
Enter your email and spend 1 minute every day to learn something new.
I agree to receive email updates