Allow text in children of Text components

Author: hsource

lib/rules/no-raw-text.js

@@ -27,6 +27,22 @@ const elementName = (node) => {
   return reversedIdentifiers.reverse().join('.');
 };
 
+const hasAllowedParent = (parent, allowedElements) => {
+  let curNode = parent;
+
+  while (curNode) {
+    if (curNode.type === 'JSXElement') {
+      const name = elementName(curNode);
+      if (allowedElements.includes(name)) {
+        return true;
+      }
+    }
+    curNode = curNode.parent;
+  }
+
+  return false;
+};
+
 function create(context) {
   const options = context.options[0] || {};
 
@@ -50,7 +66,7 @@ function create(context) {
 
   const hasOnlyLineBreak = (value) => /^[\r\n\t\f\v]+$/.test(value.replace(/ /g, ''));
 
-  const getValidation = (node) => !allowedElements.includes(elementName(node.parent));
+  const getValidation = (node) => !hasAllowedParent(node.parent, allowedElements);
 
   return {
     Literal(node) {

tests/lib/rules/no-raw-text.js

@@ -114,6 +114,12 @@ const tests = {
         }
       `,
     },
+    {
+      // Testing nested components inside an allowed component
+      code: `
+        <Text>Some text <>More text</></Text>
+      `,
+    },
   ],
   invalid: [
     {