https://github.com/iagolast/jest-seo

Custom matchers for SEO
https://github.com/iagolast/jest-seo

Last synced: 24 days ago
JSON representation

Custom matchers for SEO

• Host: GitHub
• URL: https://github.com/iagolast/jest-seo
• Owner: IagoLast
• License: mit
• Created: 2020-03-06T17:59:08.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2023-01-05T09:17:57.000Z (almost 2 years ago)
• Last Synced: 2023-04-04T17:18:02.783Z (over 1 year ago)
• Language: JavaScript
• Size: 499 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 10
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Jest-Seo

Custom Jest Matchers to perform SEO tests.

## Matchers

### `.toHaveMetaTitle(expectedTitle?: String)`

Check if the html elenent has the expected title. When no title is given it only checks the existence of a title meta tag.

**Parameters** 

- **expectedTitle:** Optional String representing expected content of the title meta tag.

**Example**

```js

const $html = document.createElement('html');

$html.innerHTML = `

    

`

;

expect($html).toHaveMetaTitle(''); // PASS

expect($html).toHaveMetaTitle('dummy_title'); // PASS

expect($html).toHaveMetaTitle('Different title'); // FAIL

```

### `.toHaveMetaDescription(expectedDescription?: String)`

Check if the html elenent has the expected meta description. When no expected value is given it only checks the existence of the meta tag.

**Parameters** 

- **expectedDescription:** Optional String representing expected content of the description meta tag.

**Example**

```js

const $html = document.createElement('html');

$html.innerHTML = `

    

    
 This html has not a description

`

;


expect($html).toHaveMetaDescription(''); // PASS

expect($html).toHaveMetaDescription('expected content'); // PASS

expect($html).toHaveMetaDescription('unexpected content'); // FAIL

```

### `.toHaveHeading(expectedHeading: String, opts)`

Checks the given element has the expected heading level. It also checks ARIA roles.

**Parameters** 

- **expectedHeading:** The expected heading level: `'h1'|'h2'|'h3'|'h4'|'h5','h6'`

- **opts.aria:** Boolean value, when true, [aria roles](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/heading_role) are considered for the expected heading.

**Examples**

Basic tests:

```js

const const = document.createElement('h2');

expect(element).toHaveHeading('h1'); // FAIL

expect(element).toHaveHeading('h2'); // PASS

```

Enabling ARIA:

```js

const element = document.createElement('div');

element.setAttribute('role', 'heading');

element.setAttribute('aria-level', '2');

expect(element).toHaveHeading('h2'); // FAIL

expect(element).toHaveHeading('h2', { aria: false }); // FAIL

expect(element).toHaveHeading('h2', { aria: true }); // PASS

```