> For the complete documentation index, see [llms.txt](https://tkssharma.gitbook.io/react-training/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://tkssharma.gitbook.io/react-training/react-next-step-day-12/examples-testing.md). # Examples: Testing The easiest way to start with testing React components is doing snapshot testing, a testing technique that lets you test components in isolation. If you are familiar with testing software, it’s just like unit testing you do for classes: you test each component functionality. I assume you created a React app with `create-react-app`, which already comes with **Jest** installed, the testing package we’ll need. Let’s start with a simple test. CodeSandbox is a great environment to try this out. Start with a React sandbox, and create an `App.js` component in a `components` folder, and add an `App.test.js` file. ``` import React from 'react' export default function App() { return (

Hello CodeSandbox

Start editing to see some magic happen!

) } ``` Our first test is dumb: ``` test('First test', () => { expect(true).toBeTruthy() }) ``` When CodeSandbox detects test files, it automatically runs them for you, and you can click the Tests button in the bottom of the view to show your test results: ![](https://flaviocopes.com/react-testing-components/first-test.png) A test file can contain multiple tests: ![](https://flaviocopes.com/react-testing-components/test-details.png) Let’s do something a bit more useful now, to actually test a React component. We only have App now, which is not doing anything really useful, so let’s first set up the environment with a little application with more functionality: the counter app we built previously. If you skipped it, you can go back and read how we built it, but for easier reference I add it here again. It’s just 2 components: App and Button. Create the `App.js` file: ``` import React, { useState } from 'react' import Button from './Button' const App = () => { const [count, setCount] = useState(0) const incrementCount = increment => { setCount(count + increment) } return (
) } export default App ``` and the `Button.js` file: ``` import React from 'react' const Button = ({ increment, onClickFunction }) => { const handleClick = () => { onClickFunction(increment) } return } export default Button ``` We are going to use the `react-testing-library`, which is a great help as it allows us to inspect the output of every component and to apply events on them. You can read more about it on or by watching [this video](https://www.youtube.com/watch?v=JKOwJUM4_RM). Let’s test the Button component first. We start by importing `render` and `fireEvent` from `react-testing-library`, two helpers. The first lets us render JSX. The second lets us emit events on a component. Create a `Button.test.js` and put it in the same folder as `Button.js`. ``` import React from 'react' import { render, fireEvent } from 'react-testing-library' import Button from './Button' ``` Buttons are used in the app to accept a click event and then they call a function passed to the `onClickFunction` prop. We add a `count` variable and we create a function that increments it: ``` let count const incrementCount = increment => { count += increment } ``` Now off to the actual tests. We first initialize count to 0, and we render a `+1` `Button`component passing a `1` to `increment` and our `incrementCount` function to `onClickFunction`. Then we get the content of the first child of the component, and we check it outputs `+1`. We then proceed to clicking the button, and we check that the count got from 0 to 1: ``` test('+1 Button works', () => { count = 0 const { container } = render(