Configure Jest for mobile testing #3206

sliptype · 2023-04-10T22:11:38Z

Description

Configure Jest to run successfully for the mobile app
Use babel to compile typescript instead of ts-jest which wasn't working due to Flow files with .js extensions in the react-native codebase

The drawback to this is that our tests won't be typechecked when run
Add babel plugin to transform react-use imports so that browser env specific hooks aren't imported

Coming next:

Test for the NavigationContainer linking config

Dragons

Added process.env checks to determine if running via Jest. Will confirm that doesn't break anything in non-test envs

How Has This Been Tested?

Please describe the tests that you ran to verify your changes. Provide repro instructions & any configuration.

How will this change be monitored?

For features that are critical or could fail silently please describe the monitoring/alerting being added.

Feature Flags

Are all new features properly feature flagged? Describe added feature flags.

audius-infra · 2023-04-10T22:15:43Z

It looks like there may be some changes to native mobile code, which requires triggering a full app release. Please follow the instructions here: https://www.notion.so/audiusproject/When-to-bump-app-version-2644a8f772364a4d91f44abcba44ce0b?pvs=4. cc @nicoback2 @sliptype

dylanjeffers

amazing work getting this set up! excited to add more frameworks and see where we can take this.

dylanjeffers · 2023-04-10T22:26:54Z

packages/common/src/services/solana-client/SolanaClient.ts

@@ -22,7 +22,9 @@ export class SolanaClient {
    try {
      this.connection = new Connection(solanaClusterEndpoint!, 'confirmed')
    } catch (e) {
-      console.error('Could create Solana RPC connection', e)
+      if (process.env.JEST_WORKER_ID === undefined) {


fun! just wondering what the idea is here? is this to avoid extra logs when running tests? would this be the way we would handle logs like this going forward? Would we want to just mock out SolanaClient?

Yeah this was to avoid big errors when testing, would probably be better to mock solana client. Let me try that!

Also curious about using JEST_WORKER_ID? I thought JEST sets NODE_ENV='test'. (https://jestjs.io/docs/environment-variables)

dylanjeffers · 2023-04-10T22:27:36Z

packages/common/src/store/pages/trending/reducer.ts

@@ -22,7 +22,9 @@ import {
  makeInitialState
 } from './lineup/reducer'

-const urlParams = new URLSearchParams(window.location.search)
+const urlParams = new URLSearchParams(


ah interesting, this is cool to see where we make assumptions. since this is in common... i wonder if we should update this at som point?

Yeah most definitely, shouldn't be relying on window.location in the reducer

The pattern I've seen most often is to just throw any global access into its own module as a re-export such that you can do
import {location} from './location';

Then it's easy to automock it for testing.

dylanjeffers · 2023-04-10T22:28:37Z

packages/mobile/babel.config.js

@@ -1,7 +1,23 @@
 module.exports = (api) => {
  const babelEnv = api.env()
  const plugins = [
-    ['@babel/plugin-transform-react-jsx', { runtime: 'automatic' }]
+    ['@babel/plugin-transform-react-jsx', { runtime: 'automatic' }],


wow amazing work making this work. is this based on an issue we could potentially reference? or maybe some comments? cause this is pretty wild

Good call, let me add a comment. For reference here is the issue:
streamich/react-use#483
https://github.com/streamich/react-use/blob/master/docs/Usage.md

dylanjeffers · 2023-04-10T22:30:48Z

packages/mobile/jest.config.js

@@ -0,0 +1,55 @@
+// These are required to be transformed because
+// they are ESM and jest doesn't support ESM


ive heard decent things about https://vitest.dev/, i wonder if that would support esm, cause its pretty wild just doesn't. obvs not something for rn, just a long term thing

Honestly with the amount of config jest required I would be open to switching, I want to see if vitest supports react-native

dylanjeffers · 2023-04-10T22:32:18Z

packages/mobile/jest.setup.js

+
+global.navigator = {
+  userAgent: 'node.js'
+}


wow incredible mocks! just checking that we need to manually mock things like @react-native-cookies/cookies, cause i think if you simply say jest.mock('@react-native-cookies/cookies') it will try and fill in the blanks and mock every exported module, not sure though.

Yeah, for some reason the automocks didn't resolve the errors that were being thrown but manually mocking did 🤷

Auto-mocking depends heavily on how the module exports things. I've rarely had it just work, unfortunately.

dylanjeffers · 2023-04-10T22:32:28Z

packages/mobile/package.json

    "@babel/runtime": "7.21.0",
    "@react-native-community/eslint-config": "3.2.0",
    "@svgr/plugin-svgo": "5.5.0",
    "@tsconfig/react-native": "2.0.3",
    "@types/array.prototype.flat": "1.2.1",
    "@types/bn.js": "5.1.0",
    "@types/hls.js": "0.13.0",
-    "@types/jest": "24.9.1",
+    "@types/jest": "29.5.0",


big changes, nice

dylanjeffers · 2023-04-10T22:33:14Z

packages/web/package-lock.json

@@ -35860,4 +35860,4 @@
      }
    }
  }
-}
+}


wonder if we should keep for this pr?

dylanjeffers · 2023-04-10T22:33:31Z

packages/mobile/src/app/App.test.tsx

@@ -6,7 +6,7 @@ import 'react-native'
 // Note: test renderer must be required after react-native.
 import renderer from 'react-test-renderer'

-import { App } from 'app/app'
+import { App } from './App'


wow it actually renders!

Is our goal to render the whole app and test it in an integration or e2e style fashion?
In my experience, the smaller the scope for your tests, the less you need to do things like mocking all of the external libraries and browser API usage etc.

I think some high level integration / smoke tests would be good to have, seeing as we have no tests for mobile at all right now. We at least have probers for web. But generally I agree that the scope of most tests should be small, the whole reason I went down this path was to unit test the deep-linking code lol

Yeah agreed we can start running smaller tests now, but it's great you covered all the bad cases that we might experience along the way.

audius-infra · 2023-04-11T14:56:16Z

It looks like there may be some changes to native mobile code, which requires triggering a full app release. Please follow the instructions here: https://www.notion.so/audiusproject/When-to-bump-app-version-2644a8f772364a4d91f44abcba44ce0b?pvs=4. cc @nicoback2 @sliptype

audius-infra · 2023-04-11T17:00:54Z

It looks like there may be some changes to native mobile code, which requires triggering a full app release. Please follow the instructions here: https://www.notion.so/audiusproject/When-to-bump-app-version-2644a8f772364a4d91f44abcba44ce0b?pvs=4. cc @nicoback2 @sliptype

sliptype added 3 commits April 7, 2023 17:02

mobile jest almost working

c630439

Jest working

84d0fe7

Clean up

d1f5706

sliptype requested a review from a team April 10, 2023 22:11

sliptype assigned schottra Apr 10, 2023

sliptype requested review from dylanjeffers and removed request for a team April 10, 2023 22:11

pull-request-size bot added the size/L label Apr 10, 2023

sliptype requested a review from a team April 10, 2023 22:11

dylanjeffers approved these changes Apr 10, 2023

View reviewed changes

sliptype added 2 commits April 11, 2023 09:32

Address pr comments

9abe5e3

Undo web package-lock changes

4c91e89

Fix type error

b261dda

sliptype mentioned this pull request Sep 22, 2023

[C-3123] Add mobile e2e test framework AudiusProject/audius-protocol#6105

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Configure Jest for mobile testing #3206

Configure Jest for mobile testing #3206

sliptype commented Apr 10, 2023

audius-infra commented Apr 10, 2023

dylanjeffers left a comment

dylanjeffers Apr 10, 2023

sliptype Apr 11, 2023

schottra Apr 11, 2023

dylanjeffers Apr 10, 2023

sliptype Apr 11, 2023

schottra Apr 11, 2023

dylanjeffers Apr 10, 2023

sliptype Apr 11, 2023

dylanjeffers Apr 10, 2023

sliptype Apr 11, 2023

dylanjeffers Apr 10, 2023

sliptype Apr 11, 2023

schottra Apr 11, 2023

dylanjeffers Apr 10, 2023

dylanjeffers Apr 10, 2023

dylanjeffers Apr 10, 2023

schottra Apr 11, 2023

sliptype Apr 11, 2023

dylanjeffers Apr 11, 2023

audius-infra commented Apr 11, 2023

audius-infra commented Apr 11, 2023

		@@ -0,0 +1,55 @@
		// These are required to be transformed because
		// they are ESM and jest doesn't support ESM

@@ @@ -35860,4 +35860,4 @@ @@
                     }
                   }
                 }
-              }
+              }

Configure Jest for mobile testing #3206

Are you sure you want to change the base?

Configure Jest for mobile testing #3206

Conversation

sliptype commented Apr 10, 2023

Description

Dragons

How Has This Been Tested?

How will this change be monitored?

Feature Flags

audius-infra commented Apr 10, 2023

dylanjeffers left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

audius-infra commented Apr 11, 2023

audius-infra commented Apr 11, 2023