[jsx-no-constructed-context-values] Update isJsxContext check to allo…

…w for JSXIdentifier ending with Provider
jsx-eslint · May 4, 2022 · 03645af · 03645af
1 parent c8833f3
commit 03645af
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 5 deletions.
diff --git a/lib/rules/jsx-no-constructed-context-values.js b/lib/rules/jsx-no-constructed-context-values.js
@@ -143,12 +143,15 @@ module.exports = {
     return {
       JSXOpeningElement(node) {
         const openingElementName = node.name;
-        if (openingElementName.type !== 'JSXMemberExpression') {
-          // Has no member
-          return;
-        }
 
-        const isJsxContext = openingElementName.property.name === 'Provider';
+        // Consider an element a context provider if the name is either:
+        // - identifier and ends with Provider (i.e. SomeContextProvider)
+        // - member expression and has Provider as a property (i.e. SomeContext.Provider)
+        const isJsxContext = (openingElementName.type === 'JSXMemberExpression'
+            && openingElementName.property.name === 'Provider')
+          || (openingElementName.type === 'JSXIdentifier'
+            && openingElementName.name.endsWith('Provider'));
+
         if (!isJsxContext) {
           // Member is not Provider
           return;

diff --git a/tests/lib/rules/jsx-no-constructed-context-values.js b/tests/lib/rules/jsx-no-constructed-context-values.js
@@ -33,6 +33,9 @@ ruleTester.run('react-no-constructed-context-values', rule, {
     {
       code: '<Context.Provider value={props}></Context.Provider>',
     },
+    {
+      code: '<ContextProvider value={props}></ContextProvider>',
+    },
     {
       code: '<Context.Provider value={100}></Context.Provider>',
     },
@@ -155,6 +158,20 @@ ruleTester.run('react-no-constructed-context-values', rule, {
         },
       }],
     },
+    {
+      // Invalid because object construction creates a new identity
+      // Duplicate of above test but using an identifier as the context provider name
+      code: 'function Component() { const foo = {}; return (<ContextProvider value={foo}></ContextProvider>) }',
+      errors: [{
+        messageId: 'withIdentifierMsg',
+        data: {
+          variableName: 'foo',
+          type: 'object',
+          nodeLine: '1',
+          usageLine: '1',
+        },
+      }],
+    },
     {
       // Invalid because array construction creates a new identity
       code: 'function Component() { const foo = []; return (<Context.Provider value={foo}></Context.Provider>) }',