--- title: "Using Jest with React - CoderPad Interview Docs" description: "Learn how to set up the Jest testing library with React in the Interview platform." canonical: "https://coderpad.io/resources/docs/unit-testing/using-jest-with-react/" last_modified: "2023-02-03 06:14:35" --- 1. [Docs home](https://coderpad.io/resources/docs/) / 2. [Unit testing](https://coderpad.io/resources/docs/unit-testing/) / 3. [Using Jest with React](https://coderpad.io/resources/docs/unit-testing/using-jest-with-react/) [Documentation menu](#docs-navigation) # Using Jest with React Last updated on February 3, 2023 ## Setting up Jest + React Testing Library in an Interview environment In Interview React environments, we use Vite as the bundler and dev server for your React project. We chose Vite for its simple setup, out-of-the-box TypeScript support, and hot module reloading. Unfortunately, the integration between Vite and Jest is still a work in progress. To use Jest in your React project, we suggest using Babel to transpile your code. Our recommended approach is largely borrowed from [this Egghead.io course](https://egghead.io/lessons/jest-adding-jest-with-typescript-support-to-a-vite-application). In this example, we will also be installing [Testing Library for React](https://testing-library.com/docs/react-testing-library/intro/). ## NPM Dependencies First, you will need to install several dev dependencies: ``` # Babel Dependencies npm install -D @babel/preset-env @babel/preset-react @babel/preset-typescript # Testing-library Dependencies npm install -D @testing-library/react @testing-library/jest-dom @testing-library/user-event # Jest Dependencies npm install -D jest jest-environment-jsdomCode language: PHP (php) ``` ## Babel Configuration Add a Babel config file in the root of the project called`babel.config.js`. ``` module.exports = {  presets: ['@babel/preset-env',   ['@babel/preset-react', {runtime: 'automatic'}], ], };Code language: JavaScript (javascript) ``` ## Jest Configuration Lastly, add a Jest config file and setup file in the root of the project called`jest.config.js`and`jest.setup.js`, respectively. ``` // jest.config.js module.exports = {  clearMocks: true,  testEnvironment: "jsdom",  setupFilesAfterEnv: ["/jest.setup.ts" ],  moduleNameMapper: {    "\\.(css|less)$": "identity-obj-proxy" } } ​ // jest.setup.js import "@testing-library/jest-dom";Code language: JavaScript (javascript) ``` At this point, you can add npm to your scripts to run Jest. ``` // In package.json "scripts": {  "test": "jest",  "test:watch": "jest --watchAll" }Code language: JavaScript (javascript) ``` Now, you can run`npm run test`or`npm run test:watch`in the interactive shell to run the unit tests in your React project. You can test this out in the sandbox below: Close Docs Index - [Screen](https://coderpad.io/resources/docs/screen/) Toggle children pages - [Quick start guides](https://coderpad.io/resources/docs/screen/recruiters-quickstart/) Toggle children pages - [Onboarding Checklist](https://coderpad.io/resources/docs/screen/recruiters-quickstart/screen-onboarding-checklist/) - [The CoderPad Screen Score Guide](https://coderpad.io/resources/docs/the-coderpad-screen-score-guide/) - [Video Guides](https://coderpad.io/resources/docs/screen/recruiters-quickstart/video-guides/) - [Tests](https://coderpad.io/resources/docs/screen/tests/) Toggle children pages - [Creating a test](https://coderpad.io/resources/docs/screen/tests/creating-a-test/) - [Customizing test content](https://coderpad.io/resources/docs/screen/tests/customizing-test-content/) - [Editing test settings](https://coderpad.io/resources/docs/screen/tests/editing-test-settings/) - [AI Tools for Screen](https://coderpad.io/resources/docs/screen/tests/ai-tools-for-screen/) - [Test management](https://coderpad.io/resources/docs/screen/tests/test-management/) - [Test retake requests](https://coderpad.io/resources/docs/screen/tests/test-retake-requests/) - [Cheating prevention and detection in Screen](https://coderpad.io/resources/docs/screen/tests/cheating-prevention-detection/) Toggle children pages - [Webcam proctoring](https://coderpad.io/resources/docs/screen/tests/cheating-prevention-detection/webcam-proctoring/) - [Test Insights](https://coderpad.io/resources/docs/test-insights/) - [Projects NEW](https://coderpad.io/resources/docs/screen/tests/projects/) - [Candidate management](https://coderpad.io/resources/docs/screen/candidate-management/) Toggle children pages - [Anonymizing candidates](https://coderpad.io/resources/docs/screen/candidate-management/anonymizing-candidates/) - [Import candidates from CSV file](https://coderpad.io/resources/docs/screen/candidate-management/import-candidates-from-csv-file/) - [Candidate reports](https://coderpad.io/resources/docs/screen/candidate-reports/) Toggle children pages - [Candidates dashboard](https://coderpad.io/resources/docs/screen/candidate-reports/candidate-dashboard/) - [Code playback](https://coderpad.io/resources/docs/screen/candidate-reports/code-playback/) - [Fixing an incorrectly marked question](https://coderpad.io/resources/docs/screen/candidate-reports/fixing-an-incorrectly-marked-question/) - [Error messages in candidate reports](https://coderpad.io/resources/docs/screen/candidate-reports/error-messages-in-candidate-reports/) - [Customizing questions](https://coderpad.io/resources/docs/screen/customizing-questions/) Toggle children pages - [Creating custom questions](https://coderpad.io/resources/docs/screen/customizing-questions/creating-custom-questions/) Toggle children pages - [Custom Project questions](https://coderpad.io/resources/docs/screen/customizing-questions/creating-custom-questions/custom-project-questions/) - [Importing questions](https://coderpad.io/resources/docs/screen/customizing-questions/importing-questions/) - [Customized domains and skills](https://coderpad.io/resources/docs/screen/customizing-questions/customized-domains-and-skills/) - [Sharing your custom questions](https://coderpad.io/resources/docs/screen/customizing-questions/sharing-your-custom-questions/) - [Integrations](https://coderpad.io/resources/docs/screen/integrations/) Toggle children pages - [Ashby for Screen](https://coderpad.io/resources/docs/screen/integrations/ashby-for-screen/) - [Greenhouse for Screen](https://coderpad.io/resources/docs/screen/integrations/greenhouse/) - [iCIMS](https://coderpad.io/resources/docs/screen/integrations/icims/) - [Jobvite](https://coderpad.io/resources/docs/screen/integrations/jobvite/) - [Lever](https://coderpad.io/resources/docs/screen/integrations/lever/) - [SmartRecruiters](https://coderpad.io/resources/docs/screen/integrations/smartrecruiters/) - [Taleez](https://coderpad.io/resources/docs/screen/integrations/taleez/) - [Taleo](https://coderpad.io/resources/docs/screen/integrations/taleo/) - [Teamtailor](https://coderpad.io/resources/docs/screen/integrations/teamtailor/) - [Workable](https://coderpad.io/resources/docs/screen/integrations/workable/) - [Workday](https://coderpad.io/resources/docs/screen/integrations/workday/) - [Account management](https://coderpad.io/resources/docs/screen/account-management/) Toggle children pages - [Editing your profile](https://coderpad.io/resources/docs/screen/account-management/editing-your-profile/) - [Managing users & teams](https://coderpad.io/resources/docs/screen/account-management/managing-users/) - [Billing](https://coderpad.io/resources/docs/interview/account-mgmt/billing-history/) - [Configure data protection](https://coderpad.io/resources/docs/screen/account-management/configure-data-protection/) - [Insights](https://coderpad.io/resources/docs/interview/account-mgmt/insights/) - [SSO](https://coderpad.io/resources/docs/screen/account-management/sso/) Toggle children pages - [Okta SSO legacy process](https://coderpad.io/resources/docs/screen/account-management/sso/okta-sso-legacy-process/) - [Cancel your subscription](https://coderpad.io/resources/docs/interview/account-mgmt/unsubscribing/) - [More](https://coderpad.io/resources/docs/screen/more-screen-resources/) Toggle children pages - [FAQ](https://coderpad.io/faqs/#screen-faq) - [Supported languages, frameworks, & technologies](https://coderpad.io/resources/docs/screen/more-screen-resources/supported-languages-frameworks-technologies/) Toggle children pages - [Available domains](https://coderpad.io/resources/docs/screen/more-screen-resources/supported-languages-frameworks-technologies/available-domains/) - [What compiler does my Screen project run on?](https://coderpad.io/resources/docs/screen/more-screen-resources/supported-languages-frameworks-technologies/what-compiler-does-my-screen-project-run-on/) - [What compiler does my Screen test run on?](https://coderpad.io/resources/docs/screen/more-screen-resources/supported-languages-frameworks-technologies/what-compiler-does-my-test-run-on/) - [Supported browser versions](https://coderpad.io/resources/docs/screen/more-screen-resources/supported-languages-frameworks-technologies/browser-versions/) - [API key access](https://coderpad.io/resources/docs/screen/more-screen-resources/api-key-access/) - [Accessibility](https://coderpad.io/resources/docs/accessibility/) - [API documentation](https://coderpad.io/resources/docs/screen/more-screen-resources/api-documentation/) - [Troubleshooting Screen](https://coderpad.io/resources/docs/screen/more-screen-resources/troubleshoot/) - [Static code analysis](https://coderpad.io/resources/docs/screen/more-screen-resources/static-code-analysis/) - [Code editor](https://coderpad.io/resources/docs/screen/more-screen-resources/monaco-code-editor/) - [Report a question leak](https://coderpad.io/resources/docs/screen/more-screen-resources/report-a-question-leak/) - [Interview](https://coderpad.io/resources/docs/interview/) Toggle children pages - [Quick start guides](https://coderpad.io/resources/docs/interview/quick-start-guides/) Toggle children pages - [Onboarding Checklist](https://coderpad.io/resources/docs/interview/quick-start-guides/interview-onboarding-checklist/) - [Interviewers](https://coderpad.io/resources/docs/interview/quick-start-guides/interviewers/) Toggle children pages - [Live Interview quick start](https://coderpad.io/resources/docs/interview/quick-start-guides/interviewers/live-interview-pads/) - [Take-home project quick start](https://coderpad.io/resources/docs/interview/quick-start-guides/interviewers/take-home-projects/) - [Interview best practices](https://coderpad.io/resources/docs/interview/quick-start-guides/interviewers/interview-best-practices/) - [Recruiters](https://coderpad.io/resources/docs/interview/quick-start-guides/recruiters/) - [Account administrators](https://coderpad.io/resources/docs/interview/quick-start-guides/account-admins/) - [Video Guides](https://coderpad.io/resources/docs/interview/quick-start-guides/coderpad-interview-quickstart-video-guides/) - [Engineer’s guide to multi-file frameworks](https://coderpad.io/resources/docs/interview/quick-start-guides/multi-file-frameworks-for-engineers/) - [Talent acquisition’s guide to multi-file frameworks](https://coderpad.io/resources/docs/interview/quick-start-guides/multi-file-frameworks-for-talent-acquisition-teams/) - [Pads](https://coderpad.io/resources/docs/interview/pads/) Toggle children pages - [Creating a pad](https://coderpad.io/resources/docs/interview/pads/creating-a-pad/) - [Using pad features](https://coderpad.io/resources/docs/interview/pads/using-pad-features/) - [Jupyter Notebooks](https://coderpad.io/resources/docs/interview/pads/jupyter-notebooks/) - [API client](https://coderpad.io/resources/docs/interview/pads/api-client/) - [AI Tools for Interview](https://coderpad.io/resources/docs/interview/pads/interview-ai-assist/) - [Code editor](https://coderpad.io/resources/docs/interview/pads/code-editor/) - [Video & audio chat](https://coderpad.io/resources/docs/interview/pads/video-and-audio-call/) Toggle children pages - [AI Notetaker](https://coderpad.io/resources/docs/interview/pads/live-interview-transcription/) - [Interview Highlights NEW](https://coderpad.io/resources/docs/interview-highlights/) - [Interview Outlines NEW](https://coderpad.io/resources/docs/interview/pads/video-and-audio-call/interview-outlines/) - [Private Interviewer Notes](https://coderpad.io/resources/docs/interview/pads/private-interviewer-notes/) - [Settings](https://coderpad.io/resources/docs/interview/pads/settings/) - [Keyboard shortcuts](https://coderpad.io/resources/docs/interview/pads/keyboard-shortcuts/) - [Playback & Pad Summary](https://coderpad.io/resources/docs/interview/pads/playback-mode/) - [Duplicate pads](https://coderpad.io/resources/docs/interview/pads/duplicate-pads/) - [Pad bulk actions](https://coderpad.io/resources/docs/interview/pads/pad-bulk-actions/) - [Drawing mode](https://coderpad.io/resources/docs/interview/drawing-mode/) - [Interview question bank](https://coderpad.io/resources/docs/interview/question-bank/) Toggle children pages - [Creating and editing questions](https://coderpad.io/resources/docs/interview/question-bank/creating-and-editing-a-question/) - [Example questions](https://coderpad.io/resources/docs/interview/question-bank/example-questions/) - [Test cases](https://coderpad.io/resources/docs/interview/question-bank/test-cases/) - [Focus Time](https://coderpad.io/resources/docs/interview/focus-time/) - [Databases](https://coderpad.io/resources/docs/interview/databases/) - [Custom files](https://coderpad.io/resources/docs/interview/custom-files/) - [Integrations](https://coderpad.io/resources/docs/interview/integrations/) Toggle children pages - [Ashby for Interview](https://coderpad.io/resources/docs/interview/integrations/ashby/) - [GoodTime](https://coderpad.io/resources/docs/interview/integrations/goodtime/) - [Google Chrome Calendar extension](https://coderpad.io/resources/docs/interview/integrations/google-chrome-calendar-extension/) - [Greenhouse for Interview](https://coderpad.io/resources/docs/interview/integrations/greenhouse/) Toggle children pages - [Greenhouse live interview integration](https://coderpad.io/resources/docs/interview/integrations/greenhouse/live-interview-integration/) - [Greenhouse take-home projects integration](https://coderpad.io/resources/docs/interview/integrations/greenhouse/take-home-integration/) - [iCIMS](https://coderpad.io/resources/docs/interview/integrations/icims/) - [Lever](https://coderpad.io/resources/docs/interview/integrations/lever/) - [Gem](https://support.gem.com/hc/en-us/articles/26933157317399-How-do-I-connect-my-CoderPad-account) - [SmartRecruiters](https://coderpad.io/resources/docs/interview/integrations/smartrecruiters/) - [ModernLoop](https://modernloop.notion.site/coderpad) - [Workday](https://coderpad.io/resources/docs/screen/integrations/workday/) - [Account management](https://coderpad.io/resources/docs/interview/account-mgmt/) Toggle children pages - [Team management](https://coderpad.io/resources/docs/interview/account-mgmt/team-management/) - [Managing users](https://coderpad.io/resources/docs/interview/account-mgmt/managing-users/) - [SSO](https://coderpad.io/resources/docs/screen/account-management/sso/) - [Insights](https://coderpad.io/resources/docs/interview/account-mgmt/insights/) - [Billing](https://coderpad.io/resources/docs/interview/account-mgmt/billing-history/) - [Canceling your subscription](https://coderpad.io/resources/docs/interview/account-mgmt/unsubscribing/) - [More](https://coderpad.io/resources/docs/interview/more-interview-resources/) Toggle children pages - [Cheating prevention and detection in Interview](https://coderpad.io/resources/docs/cheating-prevention-in-interview/) - [FAQ](https://coderpad.io/faqs/#live-faq) - [Accessibility](https://coderpad.io/resources/docs/accessibility/) - [Supported technologies & languages](https://coderpad.io/resources/docs/interview/more-interview-resources/supported-technologies-languages/) Toggle children pages - [Languages & frameworks](https://coderpad.io/languages/) - [Unit testing](https://coderpad.io/resources/docs/unit-testing/) Toggle children pages - [Using Jest with React](https://coderpad.io/resources/docs/unit-testing/using-jest-with-react/) - [Supported browser versions](https://coderpad.io/resources/docs/screen/more-screen-resources/supported-languages-frameworks-technologies/browser-versions/) - [API key access](https://coderpad.io/resources/docs/interview/more-interview-resources/api-key/) - [API documentation](https://coderpad.io/resources/docs/interview/more-interview-resources/api-documentation/) - [Troubleshooting](https://coderpad.io/resources/docs/interview/more-interview-resources/troubleshooting/) - [Server statuses](https://status.coderpad.io/?_gl=1*ta4d92*_ga*MTkzMTE2ODYyMC4xNjU4MjQ5Mzcw*_ga_XBQ5N5CE2N*MTY2NzQxOTY5OS4yNjIuMS4xNjY3NDIxNDQ0LjAuMC4w&_ga=2.62808234.704669655.1667307151-1931168620.1658249370) - [Data management and privacy policy](https://coderpad.io/privacy/) - [AI Fluency](https://coderpad.io/resources/docs/ai-fluency/) - [For candidates](https://coderpad.io/resources/docs/for-candidates/) Toggle children pages - [Screen preparation guide](https://coderpad.io/resources/docs/for-candidates/screen-preparation-guide/) Toggle children pages - [Webcam and microphone access](https://coderpad.io/resources/docs/for-candidates/screen-preparation-guide/webcam-access/) - [Projects exercises](https://coderpad.io/resources/docs/for-candidates/screen-preparation-guide/projects-exercises/) - [Interview preparation guide](https://coderpad.io/resources/docs/for-candidates/interview-preparation-guide/) Toggle children pages - [Try the sandbox](https://coderpad.io/resources/docs/for-candidates/interview-preparation-guide/sandbox/) - [FAQ](https://coderpad.io/faqs/#faq-do-candidates-have-to-register-an-account-or-pay-to-use-interview) - [What’s new?](https://coderpad.io/resources/docs/changelog/)