I was developing login screen for my react native application with google-sign-in as option. The logic involved nested promises and was built using chain promises. Developing the code was easy but when I started to write unit test cases for this logic I was really mind-blown. I could not find any good documentation for handling this scenarios though few helped along the way examples The provided by jest team for async code works well for single promises. The code structure can be found at . documentation https://github.com/facebook/jest/tree/master/examples/async After reading the documentation I think there are few things which are missing:- It says that folder should be present inside the same folder as the file to be tested. __mocks__ It asks to relatively import the function which is to be tested into the test folder. This works fine with relative imports but my code was structured to use by making changes in the . file. absolute imports babelrc Following is my folder structure :- I like having tests segregated and so I created a separate folder. __tests__ Now, if I follow the requirements of jest as mentioned above I have to create a folder called inside a particular screen. __mocks__ In order to make this work now I have to import from relatively into . I tried that and it worked fine. But as my entire project was using absolute imports I did not want to add relative imports specifically for this purpose. __mocks__ __tests__/tests/screens/Auth I made few small tweaks in order to make this work using absolute imports. So lets get started with that. Lets check out the code first to see how business logic is implemented. Auth.container.js On button onPress I call the function in this component which does following:- onPress Uses to authenticate with google and returns , and . react-native-google-sign-in email idToken status If you I have added in this file about which I will talk when come to the test code . For now just checkout function. TEST_authorizeGoogle authorizeUser 2. Calls my backend with the generated and to generate a new for the user and log him(or her) in. email idToken accessToken Once more ignore for now. TEST_setLoginGoogle Now lets take a look at the actually test case. First I have imported the mocks from the folder which I created locally. mocks Next, I override the function using and loginGoogle using . This is done because in ES6 named exports are always constants. Check out for more info. authorizeGoogle TEST_setAuthorizeGoogle TEST_setLoginGoogle here First I test if the second promise is called with the result of first promise or not at line 54 of the above code. Second, I test if final data is same as the mock data returned by my server which is done at line 55. In this way I was able to segregate test folders and use absolute imports to test my component for chained promises. Feedbacks are welcome!! Cheers!!

Facebook

Google

Too Long; Didn't Read

Discover Saakuru: Web3 Mass-Adoption with 0-FEES

Testing chained promises with jest in react-native using mock-data

Too Long; Didn't Read

Companies Mentioned

Harkirat Saluja

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

Testing chained promises with jest in react-native using mock-data

Too Long; Didn't Read

Companies Mentioned

Harkirat Saluja

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES