A Jest matcher to validate AMP markup.
This matcher works by wrapping HTML snippets in the minimum valid AMP HTML document and running this through the AMP validator.
Note that this matcher currently requires an active internet connection to be able to access the AMP validator.
yarn add jest-amp -D
import { amp, toBeValidAmpHtml } from 'jest-amp';
expect.extend({ toBeValidAmpHtml });
it('is valid AMP HTML', async () => {
const html = '<div>Hello, World</div>';
expect(await amp(html)).toBeValidAmpHtml();
});
The amp
function accepts an options object as the second argument.
Inject any required script elements into the document head.
import { amp } from 'jest-amp';
const ampMatcherOptions = {
scripts: [
{
async: true,
'custom-element': 'amp-list',
src: 'https://cdn.ampproject.org/v0/amp-list-0.1.js',
},
],
};
it('is valid AMP HTML', async () => {
const html = '<amp-list src="example.com"></amp-list>';
expect(await amp(html, ampMatcherOptions)).toBeValidAmpHtml();
});
Note that you can also use the alias scriptTags
.
Don't wrap the markup being tested in a boilerplate AMP document.
import { amp } from 'jest-amp';
it('is valid AMP HTML', async () => {
const html = '<amp-list src="example.com"></amp-list>';
expect(await amp(html, { wrap: false })).toBeValidAmpHtml();
});
Examples of tests written with Enzyme and React Testing Library can be found in the examples directory.