---
title: 'Jest toHaveAttribute: Get an Element Attribute Value'
description: When using Jest to run automated tests, you can retrieve attribute values
from DOM elements.
source_url:
html: https://testingbot.com/software-testing-questions/how-to-get-attribute-value-of-an-element-using-jest
md: https://testingbot.com/software-testing-questions/how-to-get-attribute-value-of-an-element-using-jest.md
---
# How to get the attribute value of an element using Jest?
- [ ](https://www.addtoany.com/add_to/facebook?linkurl=https%3A%2F%2Ftestingbot.com%2Fsoftware-testing-questions%2Fhow-to-get-attribute-value-of-an-element-using-jest.md&linkname= "Share on Facebook")
- [ ](https://www.addtoany.com/add_to/twitter?linkurl=https%3A%2F%2Ftestingbot.com%2Fsoftware-testing-questions%2Fhow-to-get-attribute-value-of-an-element-using-jest.md&linkname= "Share on Twitter")
- [ ](https://www.addtoany.com/add_to/linkedin?linkurl=https%3A%2F%2Ftestingbot.com%2Fsoftware-testing-questions%2Fhow-to-get-attribute-value-of-an-element-using-jest.md&linkname= "Share on LinkedIn")
- [ ](https://www.addtoany.com/add_to/hacker_news?linkurl=https%3A%2F%2Ftestingbot.com%2Fsoftware-testing-questions%2Fhow-to-get-attribute-value-of-an-element-using-jest.md&linkname= "Share on HackerNews")
1. **Install the Necessary Libraries** :
Make sure you have Jest and `@testing-library/react` (or `@testing-library/dom` for non-React) installed.
```
npm install --save-dev jest @testing-library/react @testing-library/jest-dom
```
2. **Create a Test File** :
Create a test file for your component or HTML element.
```
// example.test.js
import React from 'react';
import { render } from '@testing-library/react';
import '@testing-library/jest-dom/extend-expect'; // for better assertions
// Import your component
import MyTestingBotComponent from './MyTestingBotComponent';
test('it gets the attribute value of an element', () => {
const { getByTestId } = render();
// Assume your element has a data-testid attribute
const element = getByTestId('my-element');
// Get the attribute value
const attributeValue = element.getAttribute('my-attribute');
// Assert the attribute value
expect(attributeValue).toBe('expected-value');
});
```
## Example Component
Here’s an example React component (`MyTestingBotComponent`) you might be testing:
```
// MyTestingBotComponent.js
import React from 'react';
const MyTestingBotComponent = () => (
Hello, World!
);
export default MyTestingBotComponent;
```
## Explanation
- `render()`: This function from `@testing-library/react` renders the component and returns utility functions to query the rendered output.
- `getByTestId('my-element')`: This utility function queries the rendered component for an element with the `data-testid="my-element"` attribute.
- `element.getAttribute('my-attribute')`: This method retrieves the value of the specified attribute (`my-attribute`) from the selected element.
- `expect(attributeValue).toBe('expected-value')`: This Jest assertion checks if the retrieved attribute value matches the expected value.
## Additional Tips
**Use `@testing-library/jest-dom`** : The `@testing-library/jest-dom` library provides additional matchers like `toHaveAttribute`, which can simplify your tests.
```
test('it has the correct attribute value', () => {
const { getByTestId } = render();
const element = getByTestId('my-element');
// Using toHaveAttribute matcher
expect(element).toHaveAttribute('my-attribute', 'expected-value');
});
```
- [ ](https://www.addtoany.com/add_to/facebook?linkurl=https%3A%2F%2Ftestingbot.com%2Fsoftware-testing-questions%2Fhow-to-get-attribute-value-of-an-element-using-jest.md&linkname=)
- [ ](https://www.addtoany.com/add_to/twitter?linkurl=https%3A%2F%2Ftestingbot.com%2Fsoftware-testing-questions%2Fhow-to-get-attribute-value-of-an-element-using-jest.md&linkname=)
- [ ](https://www.addtoany.com/add_to/linkedin?linkurl=https%3A%2F%2Ftestingbot.com%2Fsoftware-testing-questions%2Fhow-to-get-attribute-value-of-an-element-using-jest.md&linkname=)
- [ ](https://www.addtoany.com/add_to/hacker_news?linkurl=https%3A%2F%2Ftestingbot.com%2Fsoftware-testing-questions%2Fhow-to-get-attribute-value-of-an-element-using-jest.md&linkname=)
## Sign up for a Free Trial
Start testing your apps with TestingBot.
No credit card required.
[Start Free Trial](https://testingbot.com/users/sign_up)
## Other Questions
### [Preventing the built-in dictionary from popping up on MacOS.](https://testingbot.com/software-testing-questions/how-to-stop-the-dictionary-from-popping-up-on-mac "Preventing the built-in dictionary from popping up on MacOS.")
### [What video output format is compatible with WebM?](https://testingbot.com/software-testing-questions/webm-compatible-formats "What video output format is compatible with WebM?")
### [Move an image element on a HTML page with CSS](https://testingbot.com/software-testing-questions/move-image-in-html "Move an image element on a HTML page with CSS")
### [How can I check my Screen Resolution?](https://testingbot.com/software-testing-questions/how-to-check-my-screen-resolution "How can I check my Screen Resolution?")
### [Learn about Chromedriver and Chrome automation](https://testingbot.com/software-testing-questions/what-is-chromedriver "Learn about Chromedriver and Chrome automation")
### [Centering an image with HTML and CSS](https://testingbot.com/software-testing-questions/how-to-center-an-image-in-html "Centering an image with HTML and CSS")