[feat] Jest mocks, AsyncStorage testing guidelines #53

krizzu · 2019-04-01T16:45:42Z

Summary:

We had some issues with Async Storage when it comes to testing with Jest. This PR adds mocks to be used while testing, to avoid error and integrate AS better.

Also some updates to README/Error thrown when module is not linked.

Small fix for CI job.

This PR will close:
#51, #39, #12

Test Plan:

Green CI, test it with an app.

thymikee

Nice! Looks like a good start, but we can make it better :) Left notes inlined

thymikee · 2019-04-01T18:20:33Z

docs/Jest-integration.md

+
+import AsyncStorageMock from '@react-native-community/async-storage/jest/async-storage-mock';
+
+jest.doMock('react-native', () => {


I think it's better to use jest.mock, because it's more widely used

thymikee · 2019-04-01T18:21:00Z

docs/Jest-integration.md

+2. Inside that folder, create `react-native.js` file.
+3. Inside that file, import `AsyncStorageMock` and use it to mock `NativeModules`.
+
+


FYI you can run Prettier on .md files to remove excess whitespace :)

thymikee · 2019-04-01T18:22:29Z

docs/Jest-integration.md

+    // other config
+    "setupFiles": "./path/to/jestSetupFile.js"
+  },
+// ...


This is not a valid JSON. Also setupFiles accepts an array. Please fix to:

{ "jest": { "setupFiles": ["./path/to/jestSetupFile.js"] } }

thymikee · 2019-04-01T18:29:15Z

docs/Jest-integration.md

+```json
+  "jest": {
+    // ...
+    "transformIgnorePatterns": ["/node_modules/@react-native-community/async-storage/(?!(lib))"]


Make it valid JSON

Use a catch-all regex for all @react-native-community packages to help others :D :

"transformIgnorePatterns": ["node_modules/(?!react-native|@react-native-community)"]

Make a note that this should be included by default in RN 0.60

I don't see this addressed, mind fixing?

thymikee · 2019-04-01T18:33:29Z

jest/async-storage-mock.js

+  /**
+   * Clears all keys in storage
+   */
+  clear: (cb: CallbackType) => cb(),


So the mock is actually test-framework agnostic. Maybe it's nice, but I think most of the users would expect this mock to be fully functional in JS-land only, plus it would be nice if it used jest.fn to mock methods, because that would make them, well, mocks :P which you can inspect.

How about getting rid of the example mock and just provide the basic implementation + mocks here?

That was my dilemma here - to provide fully functional mock or simple one + docs about providing your own functionality. I decided to do the latter, as I thought most people would use it to pass tests.

But I think you might be right here - it's much easier for users to implement it other way around. Going to make it fully functional first.

Also, I had jest.fn at first, but then I thought about accessing this mock in your test - how would you do that? You'd have to import mock into your test and check, i.e if it was called with such arguments. Or am I missing something here?

If you substitute module with a mock like RN.AsyncStorage = ASMock;, AsyncStorage should be a mock then and you'll be able to do expect(AsyncStorage.getItem).toBeCalledWith(smth)

Yeah, but this is mock for NativeModule, not something that user has access too

thymikee · 2019-04-01T18:34:06Z

lib/AsyncStorage.js


 To fix this issue try these steps:
  • Run \`react-native link @react-native-community/async-storage\` in the project root.
  • Rebuild and re-run the app.
  • Restart the packager with \`--clearCache\` flag.
  • If you are using CocoaPods on iOS, run \`pod install\` in the \`ios\` directory and then rebuild and re-run the app.
+  • If this error shows up while testing with Jest, check out how to mock Async Storage in repository docs.


it would be nice to provide a link

thymikee · 2019-04-01T18:34:55Z

package.json

@@ -54,7 +54,8 @@
    "semantic-release": "15.13.3"
  },
  "jest": {
-    "preset": "react-native"
+    "preset": "react-native",
+    "testMatch": [ "**/__tests__/**/*.[jt]s?(x)", "**/?(*.)+(test).[jt]s?(x)" ]


this looks pretty much lika a default testMatch, do you really need to change it?. Also, format with Prettier

Good point, I left .spec out, for e2e tests. Going to change that.

krizzu · 2019-04-03T05:31:28Z

@thymikee
This is rather large change from what I had before - now JS interface is mocked instead of NativeModule.

All of public facing methods of the mock is not jest.fn, meaning more test cases can be checked.

Also, added unit test to check mock itself, for both Promise and Callback functionality.

Thanks for your review so far and please let me know what you think 🙏

thymikee

👍 Feel free to merge after the nits are addressed :)

thymikee · 2019-04-03T06:19:48Z

docs/Jest-integration.md

+
+Select a method that suits your needs:
+
+### Mock `node_modules`


Change to With __mocks__ directory

thymikee · 2019-04-07T11:07:11Z

docs/Jest-integration.md

@@ -0,0 +1,77 @@
+# Jest integration
+
+Async Storage module is tighly coupled with a `Native Module`, meaning it needs a running React Native application to work properly. In order to use it in tests, you have to provide its separate implementation. Follow those steps to add mocked `Async Storage` to your test cases.


Native Module -> NativeModule

thymikee · 2019-04-07T11:10:56Z

docs/Jest-integration.md

+Each public method available from `Async Storage` is [a mock function](https://jestjs.io/docs/en/mock-functions), that you can test for certain condition, for example, check if it has been called with a specific arguments:
+
+```javascript
+  it('checks if Async Storage is used', async () => {


wonder why the indentation? Are you using Prettier to format that? If not, I definitely recommend

thymikee · 2019-04-07T11:13:59Z

docs/Jest-integration.md

+```json
+  "jest": {
+    // ...
+    "transformIgnorePatterns": ["/node_modules/@react-native-community/async-storage/(?!(lib))"]


I don't see this addressed, mind fixing?

thymikee · 2019-04-07T11:16:59Z

example/__tests__/App.js

+                      expect(value1).toBeNull();
+                      expect(value2).toBeNull();
+                      done();
+                    }).catch(e => done.fail(e));


you're using callback approach, but here taking advantage of getItem returning a promise. You should use the first argument (named _ instead of err or error) and check if it's not null, then call done.fail

The reason why I'm catching some of the block is that error thrown in callback methods are swallowed by Jest - meaning it'll get timeout singal, without specific reason why caused that.

Note that I only wrap blocks with assertions inside - I couldn't find nicer way to do callbacks and still get errors when assertion fail

thymikee · 2019-04-07T14:50:59Z

docs/Jest-integration.md

+
+```json
+"jest": {
+  "transformIgnorePatterns": ["node_modules/(?!(@react-native-community))/"]


Suggested change

"transformIgnorePatterns": ["node_modules/(?!(@react-native-community))/"]

"transformIgnorePatterns": ["node_modules/(?!(react-native|@react-native-community))"]

krizzu · 2019-04-10T08:48:06Z

🎉 This PR is included in version 1.3.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

krizzu added the enhancement New feature or request label Apr 1, 2019

krizzu changed the title ~~[feat] Jest mocks, docs to help testing with Jest~~ [feat] Jest mocks, AsyncStorage testing guidelines Apr 1, 2019

thymikee suggested changes Apr 1, 2019

View reviewed changes

krizzu mentioned this pull request Apr 2, 2019

SyntaxError: Unexpected token export using jest #39

Closed

krizzu force-pushed the jest-mocks branch from 67b5849 to 48891db Compare April 2, 2019 20:02

feat: mock implementation, guide for testing

424e77b

krizzu force-pushed the jest-mocks branch from 48891db to 424e77b Compare April 2, 2019 20:05

This was referenced Apr 7, 2019

Linking when using kotlin not possible? NativeModule.RCTAsyncStorage is null. #51

Closed

AsyncStorage.getItem() doesn't seem to work #12

Closed

thymikee previously approved these changes Apr 7, 2019

View reviewed changes

krizzu dismissed thymikee’s stale review via 8a621db April 7, 2019 13:31

thymikee reviewed Apr 7, 2019

View reviewed changes

docs: transform info

b866063

krizzu force-pushed the jest-mocks branch from 8a621db to b866063 Compare April 7, 2019 21:01

krizzu merged commit 485eba4 into master Apr 8, 2019

krizzu deleted the jest-mocks branch April 8, 2019 06:08

krizzu added the Released label Apr 10, 2019


		import AsyncStorageMock from '@react-native-community/async-storage/jest/async-storage-mock';

		jest.doMock('react-native', () => {

		2. Inside that folder, create `react-native.js` file.
		3. Inside that file, import `AsyncStorageMock` and use it to mock `NativeModules`.


		Select a method that suits your needs:

		### Mock `node_modules`

		@@ -0,0 +1,77 @@
		# Jest integration

		Async Storage module is tighly coupled with a `Native Module`, meaning it needs a running React Native application to work properly. In order to use it in tests, you have to provide its separate implementation. Follow those steps to add mocked `Async Storage` to your test cases.

	"transformIgnorePatterns": ["node_modules/(?!(@react-native-community))/"]
	"transformIgnorePatterns": ["node_modules/(?!(react-native\|@react-native-community))"]

[feat] Jest mocks, AsyncStorage testing guidelines #53

[feat] Jest mocks, AsyncStorage testing guidelines #53

Uh oh!

Conversation

krizzu commented Apr 1, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary:

Test Plan:

Uh oh!

thymikee left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

krizzu commented Apr 3, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

thymikee left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

krizzu commented Apr 10, 2019

Uh oh!

Uh oh!

krizzu commented Apr 1, 2019 •

edited

Loading

krizzu commented Apr 3, 2019 •

edited

Loading