diff --git a/docs/rules/jsx-no-useless-fragment.md b/docs/rules/jsx-no-useless-fragment.md
index 20ef5fca62..fce91f901f 100644
--- a/docs/rules/jsx-no-useless-fragment.md
+++ b/docs/rules/jsx-no-useless-fragment.md
@@ -9,12 +9,12 @@ A fragment is redundant if it contains only one child, or if it is the child of
The following patterns are considered warnings:
```jsx
-<>foo>
-
<>{foo}>
<>>
+
<>foo>
+
<>>
foo
@@ -41,6 +41,8 @@ The following patterns are **not** considered warnings:
<> {foo}>
+const cat = <>meow>
+
<>
diff --git a/lib/rules/jsx-no-useless-fragment.js b/lib/rules/jsx-no-useless-fragment.js
index 1837749c3c..b713a0bf10 100644
--- a/lib/rules/jsx-no-useless-fragment.js
+++ b/lib/rules/jsx-no-useless-fragment.js
@@ -27,6 +27,17 @@ function isOnlyWhitespace(text) {
return text.trim().length === 0;
}
+/**
+ * Somehow fragment like this is useful: ee eeee eeee ...>} />
+ * @param {ASTNode} node
+ * @returns {boolean}
+ */
+function isFragmentWithOnlyTextAndIsNotChild(node) {
+ return node.children.length === 1 &&
+ isJSXText(node.children[0]) &&
+ !(node.parent.type === 'JSXElement' || node.parent.type === 'JSXFragment');
+}
+
/**
* @param {string} text
* @returns {string}
@@ -158,7 +169,7 @@ module.exports = {
return;
}
- if (hasLessThanTwoChildren(node)) {
+ if (hasLessThanTwoChildren(node) && !isFragmentWithOnlyTextAndIsNotChild(node)) {
context.report({
node,
messageId: 'NeedsMoreChidren',
diff --git a/tests/lib/rules/jsx-no-useless-fragment.js b/tests/lib/rules/jsx-no-useless-fragment.js
index d113a44866..ebf2cefa19 100644
--- a/tests/lib/rules/jsx-no-useless-fragment.js
+++ b/tests/lib/rules/jsx-no-useless-fragment.js
@@ -59,6 +59,10 @@ ruleTester.run('jsx-no-uselses-fragment', rule, {
{
code: '{item.value}',
parser: parsers.BABEL_ESLINT
+ },
+ {
+ code: 'eeee ee eeeeeee eeeeeeee>} />',
+ parser: parsers.BABEL_ESLINT
}
],
invalid: [
@@ -68,12 +72,6 @@ ruleTester.run('jsx-no-uselses-fragment', rule, {
errors: [{messageId: 'NeedsMoreChidren', type: 'JSXFragment'}],
parser: parsers.BABEL_ESLINT
},
- {
- code: '<>foo>',
- output: null,
- errors: [{messageId: 'NeedsMoreChidren'}],
- parser: parsers.BABEL_ESLINT
- },
{
code: 'moo<>foo>
',
output: 'moofoo
',