https://www.hascode.com/tags/ts/ Recent content in Ts on Micha Kops' Tech Notes Hugo en Copyright © 2010 - 2025 Micha Kops. #e9d956c0c0154a221ad83c925346a8fa0e72f866 Fri, 04 Jun 2021 00:00:00 +0200 https://www.hascode.com/writing-a-react-component-test-with-jest-and-testing-library/ Fri, 04 Jun 2021 00:00:00 +0200 https://www.hascode.com/writing-a-react-component-test-with-jest-and-testing-library/ <div id="preamble"> <div class="sectionbody"> <div class="sidebarblock"> <div class="content"> <div class="title">Goals</div> <div class="olist arabic"> <ol class="arabic"> <li> <p>render a React component in a test</p> </li> <li> <p>mock HTTP/REST calls to the backend</p> </li> <li> <p>verify results</p> </li> <li> <p>achieve the above using typescript, jest and testing-library</p> </li> </ol> </div> </div> </div> </div> </div> <div class="sect1"> <h2 id="_application_under_test">Application under Test</h2> <div class="sectionbody"> <div class="paragraph"> <p>This is our application’s shortened <code>package.json</code>, generated by <a href="https://create-react-app.dev/docs/getting-started/">create-react-app</a>, adding dependencies for …​</p> </div> <div class="ulist"> <ul> <li> <p>jest</p> </li> <li> <p>testing-library</p> </li> <li> <p>typescript</p> </li> <li> <p>react</p> </li> <li> <p>dom implementations (jest-dom/react-dom)</p> </li> <li> <p>axios (for the HTTP/REST call)</p> </li> </ul> </div> <div class="listingblock"> <div class="title">package.json</div> <div class="content"> <pre class="highlight"><code class="language-javascript" data-lang="javascript">{ [..] &#34;dependencies&#34;: { &#34;@testing-library/jest-dom&#34;: &#34;^5.11.4&#34;, &#34;@testing-library/react&#34;: &#34;^11.1.0&#34;, &#34;@testing-library/user-event&#34;: &#34;^12.1.10&#34;, &#34;@types/jest&#34;: &#34;^26.0.15&#34;, &#34;@types/node&#34;: &#34;^12.0.0&#34;, &#34;@types/react&#34;: &#34;^17.0.0&#34;, &#34;@types/react-dom&#34;: &#34;^17.0.0&#34;, &#34;react&#34;: &#34;^17.0.2&#34;, &#34;react-dom&#34;: &#34;^17.0.2&#34;, &#34;react-scripts&#34;: &#34;4.0.3&#34;, &#34;typescript&#34;: &#34;^4.1.2&#34;, &#34;web-vitals&#34;: &#34;^1.0.1&#34;, &#34;axios&#34;: &#34;^0.19.0&#34; }, [..] &#34;eslintConfig&#34;: { &#34;extends&#34;: [ &#34;react-app&#34;, &#34;react-app/jest&#34; ] }, [..] }</code></pre> </div>