Add test for EMOTION_RUNTIME_AUTO_LABEL

packages/react/__tests__/element.no-babel.js

@@ -0,0 +1,17 @@
+/** @jsx jsx */
+import 'test-utils/dev-mode'
+import { render, screen } from '@testing-library/react'
+import { jsx } from '@emotion/react'
+
+describe('EmotionElement', () => {
+  it('only does runtime auto labels if the global flag is set', () => {
+    const Comp = () => <div css={{ color: 'orchid' }} data-testid="comp" />
+
+    const { rerender } = render(<Comp />)
+    expect(screen.getByTestId('comp').className).toMatch(/^css-[^-]+$/)
+
+    globalThis.EMOTION_RUNTIME_AUTO_LABEL = true
+    rerender(<Comp />)
+    expect(screen.getByTestId('comp').className).toMatch(/^css-[^-]+-Comp$/)
+  })
+})

packages/react/src/emotion-element.js

@@ -41,6 +41,9 @@ export const createEmotionProps = (type: React.ElementType, props: Object) => {
   // Runtime labeling is an opt-in feature because:
   // - It causes hydration warnings when using Safari and SSR
   // - It can degrade performance if there are a huge number of elements
+  //
+  // Even if the flag is set, we still don't compute the label if it has already
+  // been determined by the Babel plugin.
   if (
     process.env.NODE_ENV !== 'production' &&
     globalThis.EMOTION_RUNTIME_AUTO_LABEL &&