/
jsx-key.js
121 lines (113 loc) · 5.09 KB
/
jsx-key.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
/**
* @fileoverview Report missing `key` props in iterators/collection literals.
* @author Ben Mosher
*/
'use strict';
// ------------------------------------------------------------------------------
// Requirements
// ------------------------------------------------------------------------------
const RuleTester = require('eslint').RuleTester;
const rule = require('../../../lib/rules/jsx-key');
const parsers = require('../../helpers/parsers');
const parserOptions = {
ecmaVersion: 2018,
sourceType: 'module',
ecmaFeatures: {
jsx: true
}
};
const settings = {
react: {
pragma: 'Act',
fragment: 'Frag'
}
};
// ------------------------------------------------------------------------------
// Tests
// ------------------------------------------------------------------------------
const ruleTester = new RuleTester({parserOptions});
ruleTester.run('jsx-key', rule, {
valid: [
{code: 'fn()'},
{code: '[1, 2, 3].map(function () {})'},
{code: '<App />;'},
{code: '[<App key={0} />, <App key={1} />];'},
{code: '[1, 2, 3].map(function(x) { return <App key={x} /> });'},
{code: '[1, 2, 3].map(x => <App key={x} />);'},
{code: '[1, 2, 3].map(x => { return <App key={x} /> });'},
{code: '[1, 2, 3].foo(x => <App />);'},
{code: 'var App = () => <div />;'},
{code: '[1, 2, 3].map(function(x) { return; });'},
{code: 'foo(() => <div />);'},
{code: 'foo(() => <></>);', parser: parsers.BABEL_ESLINT},
{code: '<></>;', parser: parsers.BABEL_ESLINT},
{code: '<App {...{}} />;', parser: parsers.BABEL_ESLINT},
{code: '<App key="keyBeforeSpread" {...{}} />;', parser: parsers.BABEL_ESLINT, options: [{checkKeyMustBeforeSpread: true}]},
{code: '<App key="keyBeforeSpread" {...{}} />;', parser: parsers.TYPESCRIPT_ESLINT, options: [{checkKeyMustBeforeSpread: true}]},
{code: '<div key="keyBeforeSpread" {...{}} />;', parser: parsers.BABEL_ESLINT, options: [{checkKeyMustBeforeSpread: true}]},
{code: '<div key="keyBeforeSpread" {...{}} />;', parser: parsers.TYPESCRIPT_ESLINT, options: [{checkKeyMustBeforeSpread: true}]}
],
invalid: [].concat({
code: '[<App />];',
errors: [{message: 'Missing "key" prop for element in array'}]
}, {
code: '[<App {...key} />];',
errors: [{message: 'Missing "key" prop for element in array'}]
}, {
code: '[<App key={0}/>, <App />];',
errors: [{message: 'Missing "key" prop for element in array'}]
}, {
code: '[1, 2 ,3].map(function(x) { return <App /> });',
errors: [{message: 'Missing "key" prop for element in iterator'}]
}, {
code: '[1, 2 ,3].map(x => <App />);',
errors: [{message: 'Missing "key" prop for element in iterator'}]
}, {
code: '[1, 2 ,3].map(x => { return <App /> });',
errors: [{message: 'Missing "key" prop for element in iterator'}]
}, {
code: '[1, 2, 3]?.map(x => <BabelEslintApp />)',
parser: parsers.BABEL_ESLINT,
errors: [{message: 'Missing "key" prop for element in iterator'}]
}, parsers.TS({
code: '[1, 2, 3]?.map(x => <TypescriptEslintApp />)',
parser: parsers['@TYPESCRIPT_ESLINT'],
errors: [{message: 'Missing "key" prop for element in iterator'}]
}), {
code: '[1, 2, 3].map(x => <>{x}</>);',
parser: parsers.BABEL_ESLINT,
options: [{checkFragmentShorthand: true}],
settings,
errors: [{message: 'Missing "key" prop for element in iterator. Shorthand fragment syntax does not support providing keys. Use Act.Frag instead'}]
}, {
code: '[<></>];',
parser: parsers.BABEL_ESLINT,
options: [{checkFragmentShorthand: true}],
settings,
errors: [{message: 'Missing "key" prop for element in array. Shorthand fragment syntax does not support providing keys. Use Act.Frag instead'}]
}, {
code: '[<App {...obj} key="keyAfterSpread" />];',
parser: parsers.BABEL_ESLINT,
options: [{checkKeyMustBeforeSpread: true}],
settings,
errors: [{message: '`key` prop must before any `{...spread}, to avoid conflicting with React’s new JSX transform: https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html`'}]
}, {
code: '[<App {...obj} key="keyAfterSpread" />];',
parser: parsers.TYPESCRIPT_ESLINT,
options: [{checkKeyMustBeforeSpread: true}],
settings,
errors: [{message: '`key` prop must before any `{...spread}, to avoid conflicting with React’s new JSX transform: https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html`'}]
}, {
code: '[<div {...obj} key="keyAfterSpread" />];',
parser: parsers.BABEL_ESLINT,
options: [{checkKeyMustBeforeSpread: true}],
settings,
errors: [{message: '`key` prop must before any `{...spread}, to avoid conflicting with React’s new JSX transform: https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html`'}]
}, {
code: '[<div {...obj} key="keyAfterSpread" />];',
parser: parsers.TYPESCRIPT_ESLINT,
options: [{checkKeyMustBeforeSpread: true}],
settings,
errors: [{message: '`key` prop must before any `{...spread}, to avoid conflicting with React’s new JSX transform: https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html`'}]
})
});