Github Copilot: Write Unit Test Case in React Native Component & Expo for Frontend Developers

 If you don't have prior knowledge about Github Copilot, Please refer my Previous Article https://sureshdotariya.blogspot.com/2024/03/getting-started-with-github-copilot-gpt.html 

Setup React Native Project using Expo

We are going to setup a new React Native Project using Expo CLI Tool. Please refer the installation documentation  https://docs.expo.dev/tutorial/create-your-first-app/ . Once your setup is complete, You will find the below folder structure and App Running in your Simulator or Real Device.

How to use GitHub Copilot

To use GitHub Copilot, you need to have a subscription to GitHub Copilot for Individuals or GitHub Copilot for Business. (Free trials are available). You also need to install the GitHub Copilot extension for Visual Studio Code or the JetBrains IDE plugin. Once you have the extension or plugin installed, you can start using GitHub Copilot in your editor.

GitHub Copilot works by analyzing the code and comments in your file and suggesting relevant code snippets that you can accept or reject. You can also write natural language prompts to ask GitHub Copilot to generate code for specific tasks or scenarios.

After, you signup to Github Copilot from the Visual Studio Code, You will see Copilot Chatbot icon in left hand side (last one).

Write Unit Test in Github Copilot

• open App.js file in VSCode Editor

• In Github Copilot Chatbox input, Please type this text "Write unit test case for the selected component" and press enter.

• Github Copilot will generate the  unit test case for the App.js Component.

• create a new app.test.js  file in the root directory and paste the generated unit test case.

• Also you need to install jest, jest-expo & react-native testing library

       npx expo install jest-expo jest        

 

     npm install --save-dev @testing-library/react-native

• In Package.json, enter Jest Script & Jest Configurations 

                "scripts": {

                    "test": "jest"

                  },

                "jest": {

    "preset": "jest-expo",

    "transformIgnorePatterns": [

      "node_modules/(?!((jest-)?react-native|@react-native(-community)?)|expo(nent)?|@expo(nent)?/.*|@expo-google-fonts/.*|react-navigation|@react-navigation/.*|@unimodules/.*|unimodules|sentry-expo|native-base|react-native-svg)"

    ]

  },

• Finally, run 'npm run test', which will execute the Unit test cases and execution result will be displayed.