Add test

Following facebook#9230 (comment) except that `foo={true}` renders an empty string. See facebook#9230 (comment) for rationale.
eps1lon · May 11, 2022 · 3fdbd70 · 3fdbd70
1 parent aed6ac4
commit 3fdbd70
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 2 deletions.
diff --git a/packages/react-dom/src/__tests__/DOMPropertyOperations-test.js b/packages/react-dom/src/__tests__/DOMPropertyOperations-test.js
@@ -959,6 +959,21 @@ describe('DOMPropertyOperations', () => {
       expect(customElement.foo).toBe(null);
     });
 
+    // @gate enableCustomElementPropertySupport
+    it('boolean props should not be stringified in attributes', () => {
+      const container = document.createElement('div');
+      document.body.appendChild(container);
+      ReactDOM.render(<my-custom-element foo={true} />, container);
+      const customElement = container.querySelector('my-custom-element');
+
+      expect(customElement.getAttribute('foo')).toBe('');
+
+      // true => false
+      ReactDOM.render(<my-custom-element foo={false} />, container);
+
+      expect(customElement.getAttribute('foo')).toBe(null);
+    });
+
     // @gate enableCustomElementPropertySupport
     it('custom element custom event handlers assign multiple types', () => {
       const container = document.createElement('div');

diff --git a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationAttributes-test.js b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationAttributes-test.js
@@ -696,12 +696,20 @@ describe('ReactDOMServerIntegration', () => {
 
     itRenders('unknown boolean `true` attributes as strings', async render => {
       const e = await render(<custom-element foo={true} />);
-      expect(e.getAttribute('foo')).toBe('true');
+      if (ReactFeatureFlags.enableCustomElementPropertySupport) {
+        expect(e.getAttribute('foo')).toBe('');
+      } else {
+        expect(e.getAttribute('foo')).toBe('true');
+      }
     });
 
     itRenders('unknown boolean `false` attributes as strings', async render => {
       const e = await render(<custom-element foo={false} />);
-      expect(e.getAttribute('foo')).toBe('false');
+      if (ReactFeatureFlags.enableCustomElementPropertySupport) {
+        expect(e.getAttribute('foo')).toBe(null);
+      } else {
+        expect(e.getAttribute('foo')).toBe('false');
+      }
     });
 
     itRenders(