Features

How to get the attribute value of an element using Jest?

  • Share on Facebook
  • Share on Twitter
  • Share on LinkedIn
  • 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.

    Copy code
    
    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.

    Copy code
    
        // 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(<mytestingbotcomponent></mytestingbotcomponent>);
          
          // 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:

Copy code

    // MyTestingBotComponent.js
    import React from 'react';

    const MyTestingBotComponent = () => (
      <div data-testid="my-element" my-attribute="expected-value">
        Hello, World!
      </div>
    );

    export default MyTestingBotComponent;
        

Explanation

  • render(<MyTestingBotComponent />): 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.

Copy code

test('it has the correct attribute value', () => {
  const { getByTestId } = render(<mytestingbotcomponent></mytestingbotcomponent>);
  
  const element = getByTestId('my-element');
  
  // Using toHaveAttribute matcher
  expect(element).toHaveAttribute('my-attribute', 'expected-value');
});
        
  • Share on Facebook
  • Share on Twitter
  • Share on LinkedIn
  • Share on HackerNews
TestingBot Logo

Sign up for a Free Trial

Start testing your apps with TestingBot.

No credit card required.

Other Questions