rsnext/test/unit/eslint-plugin-next/no-head-element.test.ts
Houssein Djirdeh d72f5bd69d
[ESLint] Adds lint rule to flag usage of <head> (#32897)
## Bug

- [X] Related issues linked using `fixes #number`
- [X] Tests added
- [X] Errors have helpful link attached, see `contributing.md`

Fixes #30142
2021-12-31 05:09:44 +00:00

102 lines
2.2 KiB
TypeScript

import rule from '@next/eslint-plugin-next/lib/rules/no-head-element'
import { RuleTester } from 'eslint'
;(RuleTester as any).setDefaultConfig({
parserOptions: {
ecmaVersion: 2018,
sourceType: 'module',
ecmaFeatures: {
modules: true,
jsx: true,
},
},
})
const ruleTester = new RuleTester()
ruleTester.run('no-head-element', rule, {
valid: [
{
code: `import Head from 'next/head';
export class MyComponent {
render() {
return (
<div>
<Head>
<title>My page title</title>
</Head>
</div>
);
}
}
`,
filename: 'pages/index.js',
},
{
code: `import Head from 'next/head';
export class MyComponent {
render() {
return (
<div>
<Head>
<title>My page title</title>
</Head>
</div>
);
}
}
`,
filename: 'pages/index.tsx',
},
],
invalid: [
{
code: `
export class MyComponent {
render() {
return (
<div>
<head>
<title>My page title</title>
</head>
</div>
);
}
}`,
filename: 'pages/index.js',
errors: [
{
message:
"Do not use <head>. Use Head from 'next/head' instead. See: https://nextjs.org/docs/messages/no-head-element",
type: 'JSXOpeningElement',
},
],
},
{
code: `import Head from 'next/head';
export class MyComponent {
render() {
return (
<div>
<head>
<title>My page title</title>
</head>
<Head>
<title>My page title</title>
</Head>
</div>
);
}
}`,
filename: 'pages/index.ts',
errors: [
{
message:
"Do not use <head>. Use Head from 'next/head' instead. See: https://nextjs.org/docs/messages/no-head-element",
type: 'JSXOpeningElement',
},
],
},
],
})