{"id":18932,"date":"2022-09-19T21:00:00","date_gmt":"2022-09-20T04:00:00","guid":{"rendered":"https:\/\/coderpad.io\/?post_type=doc&#038;p=18932"},"modified":"2023-02-03T06:14:35","modified_gmt":"2023-02-03T14:14:35","slug":"using-jest-with-react","status":"publish","type":"doc","link":"https:\/\/coderpad.io\/resources\/docs\/unit-testing\/using-jest-with-react\/","title":{"rendered":"Using Jest with React"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">Setting up Jest + React Testing Library in an Interview environment<\/h2>\n\n\n\n<p>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.<\/p>\n\n\n\n<p>To use Jest in your React project, we suggest using Babel to transpile your code. Our recommended approach is largely borrowed from <a href=\"https:\/\/egghead.io\/lessons\/jest-adding-jest-with-typescript-support-to-a-vite-application\" target=\"_blank\" rel=\"noopener\">this Egghead.io course<\/a>. In this example, we will also be installing <a href=\"https:\/\/testing-library.com\/docs\/react-testing-library\/intro\/\" target=\"_blank\" rel=\"noopener\">Testing Library for React<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">NPM Dependencies<\/h2>\n\n\n\n<p>First, you will need to install several dev dependencies:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"PHP\" data-shcb-language-slug=\"php\"><span><code class=\"hljs language-php shcb-wrap-lines\"><span class=\"hljs-comment\"># Babel Dependencies<\/span>\nnpm install -D @babel\/preset-env @babel\/preset-react @babel\/preset-typescript\n\n<span class=\"hljs-comment\"># Testing-library Dependencies<\/span>\nnpm install -D @testing-library\/react @testing-library\/jest-dom @testing-library\/user-event\n\n<span class=\"hljs-comment\"># Jest Dependencies<\/span>\nnpm install -D jest jest-environment-jsdom<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">PHP<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">php<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<h2 class=\"wp-block-heading\">Babel Configuration<\/h2>\n\n\n\n<p>Add a Babel config file in the root of the project called <code>babel.config.js<\/code>.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-built_in\">module<\/span>.exports = {\n \u00a0<span class=\"hljs-attr\">presets<\/span>: &#91;\n \u00a0 \u00a0<span class=\"hljs-string\">'@babel\/preset-env'<\/span>,\n \u00a0  &#91;<span class=\"hljs-string\">'@babel\/preset-react'<\/span>, {<span class=\"hljs-attr\">runtime<\/span>: <span class=\"hljs-string\">'automatic'<\/span>}],\n  ],\n};<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<h2 class=\"wp-block-heading\">Jest Configuration<\/h2>\n\n\n\n<p>Lastly, add a Jest config file and setup file in the root of the project called <code>jest.config.js<\/code> and <code>jest.setup.js<\/code>, respectively.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-3\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-comment\">\/\/ jest.config.js<\/span>\n<span class=\"hljs-built_in\">module<\/span>.exports = {\n \u00a0<span class=\"hljs-attr\">clearMocks<\/span>: <span class=\"hljs-literal\">true<\/span>,\n \u00a0<span class=\"hljs-attr\">testEnvironment<\/span>: <span class=\"hljs-string\">\"jsdom\"<\/span>,\n \u00a0<span class=\"hljs-attr\">setupFilesAfterEnv<\/span>: &#91;\n \u00a0 \u00a0<span class=\"hljs-string\">\"&lt;rootDir&gt;\/jest.setup.ts\"<\/span>\n  ],\n \u00a0<span class=\"hljs-attr\">moduleNameMapper<\/span>: {\n \u00a0 \u00a0<span class=\"hljs-string\">\"\\\\.(css|less)$\"<\/span>: <span class=\"hljs-string\">\"identity-obj-proxy\"<\/span>\n  }\n}\n\u200b\n<span class=\"hljs-comment\">\/\/ jest.setup.js<\/span>\n<span class=\"hljs-keyword\">import<\/span> <span class=\"hljs-string\">\"@testing-library\/jest-dom\"<\/span>;<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-3\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>At this point, you can add npm to your scripts to run Jest.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-4\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-comment\">\/\/ In package.json<\/span>\n<span class=\"hljs-string\">\"scripts\"<\/span>: {\n \u00a0<span class=\"hljs-string\">\"test\"<\/span>: <span class=\"hljs-string\">\"jest\"<\/span>,\n \u00a0<span class=\"hljs-string\">\"test:watch\"<\/span>: <span class=\"hljs-string\">\"jest --watchAll\"<\/span>\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-4\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Now, you can run <code>npm run test<\/code> or <code>npm run test:watch<\/code> in the interactive shell to run the unit tests in your React project.<\/p>\n\n\n\n<p>You can test this out in the sandbox below:<\/p>\n\n\n<div\n\tclass=\"sandbox-embed responsive-embed \"\n\tstyle=\"padding-top: 85%\"\ndata-block-name=\"coderpad-sandbox-embed\">\n\t<iframe src=\"https:\/\/embed.coderpad.io\/sandbox?question_id=226041\" width=\"640\" height=\"544\" loading=\"lazy\" aria-label=\"Try out the CoderPad sandbox\"><\/iframe>\n<\/div>\n","protected":false},"parent":26440,"menu_order":1,"template":"","class_list":["post-18932","doc","type-doc","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/doc\/18932","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/doc"}],"about":[{"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/types\/doc"}],"version-history":[{"count":11,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/doc\/18932\/revisions"}],"predecessor-version":[{"id":30141,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/doc\/18932\/revisions\/30141"}],"up":[{"embeddable":true,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/doc\/26440"}],"wp:attachment":[{"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/media?parent=18932"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}