Testing

[zineanteoh]

This PR consists of setting up GitHub Actions CI for Unit Testing (Jest) and E2E testing (Detox).

TL;DR

This was a pain to set up. So many errors, so little reliable documentations.

Why it's a pain:

To do component testing, the official React Native website recommends using either:

1. React's Test Renderer (which has no documentation on how to set up),
2. or React Native Testing Library (which uses React's Test Renderer under the hood).

A quick look at these two options, it seems like react-native-testing-library (RNTL) might be easier for us to set up and use.

So what happens when you do npm install --save-dev @testing-library/react-native?

BOOM! You get an error saying there is a dependency conflict with React, React Native, and React Test Renderer.

The RNTL team anticipated this, and so they have a section specifically for this error (Note: it was not helpful, as it just points us to GitHub issues with dozens of suggested solutions with mixed of up and down votes. None of those worked for me.

In hindsight, I should've looked at the example repository earlier and explicitly install react-test-renderer to be the same version as react (this was the key).

Ended up needing to:

1. npm install --save-dev [email protected] (must be the same version as our react)
2. npm install --save-dev @testing-library/react-native (now it magically works!)
3. npm install --save-dev @testing-library/jest-native (recommended by RNTL)
4. Set up jest.config.ts according to this article (we for some reason still have to use jest-expo as our jest's preset. I honestly could not find any documentation on this whatsoever and I don't understand why we can't use, say, react-native preset)

What I learned

The struggle did not go to waste, as I did learn a few things from this:

1. To find out the exact version of the packages our project have, we can do:

npx envinfo --npmPackages react,react-native,react-test-renderer,@testing-library/react-native

Which returns

 npmPackages:
    @testing-library/react-native: ^12.0.0 => 12.0.0 
    react: 18.1.0 => 18.1.0 
    react-native: 0.70.5 => 0.70.5 
    react-test-renderer: 18.1.0 => 18.1.0 

How to setup E2E testing with detox locally:

1. npm i detox-cli -g
2. brew tap wix/brew
3. brew install applesimutils
4. detox build --configuration ios.sim.debug (super long)
5. npm start
6. If running locally, run detox test --configuration ios.sim.debug
7. If running on GitHub action, run detox test --configuration ios.sim.release