> For the complete documentation index, see [llms.txt](https://sydrawat.gitbook.io/react/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://sydrawat.gitbook.io/react/miscellaneous/testing/test-and-test-suites.md).
# Test & Test Suites
## First Custom Test
Typically, we write the tests in a file, which is placed / located as close as possible to the component that we are testing. Suppose we have a component called `Greeting`:
{% code title="Greeting.js" %}
```jsx
import React from 'react';
const Greeting = () => {
return (
<>
Hello Human
Greetings from outer space!
)
}
export default Greeting;
```
{% endcode %}
To test this component, we will create a new file called `Greeting.test.js`, which will be located on the same level as `Greeting.js` file. Before we dive in to what we should write into the test file, here are some basic rules to follow when defining tests, or the `3 A's` :
So now we're ready to write our own test for the `Greeting` component!
{% code title="Greeting.test.js" %}
```jsx
import {render, screen} from '@testing-library/react';
import Greeting from './Greeting';
test('renders hello human as text', () => {
//Arrange
render();
//Act ...nothing as of now
//Assert
const helloElement = screen.getByText('Hello Human');
expect(helloEelement).toBeInTheDocument();
});
```
{% endcode %}
### Test Code Structure
A few things to not about the above example:
* `test` is a globally available function that is available throughout our React app.
* The `screen` property is somewhat similar to the virtual DOM, which has access to the elements to the DOM. The screen property has many different selectors, but mostly consists of various functions:
* **get** : will throw an error if an element is not found.
* **find** : return a promise.
* **query** : won't return an error if element is not found.
* The `screen.getByText()` function takes in the text which needs to be matched, and also takes an optional second argument, which says if we want an `exact` match or not (`false` or `true`).
```jsx
const helloElement = screen.getByText('Hello Human', {exact: false});
```
* `expect()` function is also globally available in our app, which takes in the element that we have extracted from the `screen()` function, and then has a variety of function to assert the extracted element. We can also check for opposites here by using the `.not` property prefix to the available functions of `exact()` :
```jsx
expect(helloElement).not.toBeInTheDocument()
```
### Running the Test
After writing the test code for the `Greeting` component, it it time we run the tests.
```bash
yarn test
```
## Test Suites
Multiple tests together as a bundle / group, are called test suites. Tests related to a feature or a component are usually bundled together in such testing suites. We can create such a testing suite by using the global function called `describe()`
The `describe` function also takes in two parameters:
* First, the description, about the category to which the grouped tests belong to.
* Second, an anonymous function, but we do not write the tests inside this function, but we put different tests in there.
{% code title="Greeting.test.js" %}
```jsx
//...
//...
describe('Greeting Suite', () => {
test('renders hello human as text', () => {
//Arrange...
//Act...
//Assert...
}
})
```
{% endcode %}
Here's what the result looks like when a test suite is run (we can see the test suite name and within it, the one test that we had written within that test suite):
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://sydrawat.gitbook.io/react/miscellaneous/testing/test-and-test-suites.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.