ReactFreshBabelPlugin-test.js

/**
 * Copyright (c) Meta Platforms, Inc. and affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

'use strict';

const babel = require('@babel/core');
const {wrap} = require('jest-snapshot-serializer-raw');
const freshPlugin = require('react-refresh/babel');

function transform(input, options = {}) {
  return wrap(
    babel.transform(input, {
      babelrc: false,
      configFile: false,
      envName: options.envName,
      plugins: [
        '@babel/syntax-jsx',
        '@babel/syntax-dynamic-import',
        [
          freshPlugin,
          {
            skipEnvCheck:
              options.skipEnvCheck === undefined ? true : options.skipEnvCheck,
            // To simplify debugging tests:
            emitFullSignatures: true,
            ...options.freshOptions,
          },
        ],
        ...(options.plugins || []),
      ],
    }).code,
  );
}

describe('ReactFreshBabelPlugin', () => {
  it('registers top-level function declarations', () => {
    // Hello and Bar should be registered, handleClick shouldn't.
    expect(
      transform(`
        function Hello() {
          function handleClick() {}
          return <h1 onClick={handleClick}>Hi</h1>;
        }

        function Bar() {
          return <Hello />;
        }
    `),
    ).toMatchSnapshot();
  });

  it('registers top-level exported function declarations', () => {
    expect(
      transform(`
        export function Hello() {
          function handleClick() {}
          return <h1 onClick={handleClick}>Hi</h1>;
        }

        export default function Bar() {
          return <Hello />;
        }

        function Baz() {
          return <h1>OK</h1>;
        }

        const NotAComp = 'hi';
        export { Baz, NotAComp };

        export function sum() {}
        export const Bad = 42;
    `),
    ).toMatchSnapshot();
  });

  it('registers top-level exported named arrow functions', () => {
    expect(
      transform(`
        export const Hello = () => {
          function handleClick() {}
          return <h1 onClick={handleClick}>Hi</h1>;
        };

        export let Bar = (props) => <Hello />;

        export default () => {
          // This one should be ignored.
          // You should name your components.
          return <Hello />;
        };
    `),
    ).toMatchSnapshot();
  });

  it('uses original function declaration if it get reassigned', () => {
    // This should register the original version.
    // TODO: in the future, we may *also* register the wrapped one.
    expect(
      transform(`
        function Hello() {
          return <h1>Hi</h1>;
        }
        Hello = connect(Hello);
    `),
    ).toMatchSnapshot();
  });

  it('only registers pascal case functions', () => {
    // Should not get registered.
    expect(
      transform(`
        function hello() {
          return 2 * 2;
        }
    `),
    ).toMatchSnapshot();
  });

  it('registers top-level variable declarations with function expressions', () => {
    // Hello and Bar should be registered; handleClick, sum, Baz, and Qux shouldn't.
    expect(
      transform(`
        let Hello = function() {
          function handleClick() {}
          return <h1 onClick={handleClick}>Hi</h1>;
        };
        const Bar = function Baz() {
          return <Hello />;
        };
        function sum() {}
        let Baz = 10;
        var Qux;
    `),
    ).toMatchSnapshot();
  });

  it('registers top-level variable declarations with arrow functions', () => {
    // Hello, Bar, and Baz should be registered; handleClick and sum shouldn't.
    expect(
      transform(`
        let Hello = () => {
          const handleClick = () => {};
          return <h1 onClick={handleClick}>Hi</h1>;
        }
        const Bar = () => {
          return <Hello />;
        };
        var Baz = () => <div />;
        var sum = () => {};
    `),
    ).toMatchSnapshot();
  });

  it('ignores HOC definitions', () => {
    // TODO: we might want to handle HOCs at usage site, however.
    // TODO: it would be nice if we could always avoid registering
    // a function that is known to return a function or other non-node.
    expect(
      transform(`
        let connect = () => {
          function Comp() {
            const handleClick = () => {};
            return <h1 onClick={handleClick}>Hi</h1>;
          }
          return Comp;
        };
        function withRouter() {
          return function Child() {
            const handleClick = () => {};
            return <h1 onClick={handleClick}>Hi</h1>;
          }
        };
    `),
    ).toMatchSnapshot();
  });

  it('ignores complex definitions', () => {
    expect(
      transform(`
        let A = foo ? () => {
          return <h1>Hi</h1>;
        } : null
        const B = (function Foo() {
          return <h1>Hi</h1>;
        })();
        let C = () => () => {
          return <h1>Hi</h1>;
        };
        let D = bar && (() => {
          return <h1>Hi</h1>;
        });
    `),
    ).toMatchSnapshot();
  });

  it('ignores unnamed function declarations', () => {
    expect(
      transform(`
        export default function() {}
    `),
    ).toMatchSnapshot();
  });

  it('registers likely HOCs with inline functions', () => {
    expect(
      transform(`
        const A = forwardRef(function() {
          return <h1>Foo</h1>;
        });
        const B = memo(React.forwardRef(() => {
          return <h1>Foo</h1>;
        }));
        export default React.memo(forwardRef((props, ref) => {
          return <h1>Foo</h1>;
        }));
    `),
    ).toMatchSnapshot();
    expect(
      transform(`
        export default React.memo(forwardRef(function (props, ref) {
          return <h1>Foo</h1>;
        }));
    `),
    ).toMatchSnapshot();
    expect(
      transform(`
        export default React.memo(forwardRef(function Named(props, ref) {
          return <h1>Foo</h1>;
        }));
    `),
    ).toMatchSnapshot();
  });

  it('ignores higher-order functions that are not HOCs', () => {
    expect(
      transform(`
        const throttledAlert = throttle(function() {
          alert('Hi');
        });
        const TooComplex = (function() { return hello })(() => {});
        if (cond) {
          const Foo = thing(() => {});
        }
    `),
    ).toMatchSnapshot();
  });

  it('registers identifiers used in JSX at definition site', () => {
    // When in doubt, register variables that were used in JSX.
    // Foo, Header, and B get registered.
    // A doesn't get registered because it's not declared locally.
    // Alias doesn't get registered because its definition is just an identifier.
    expect(
      transform(`
        import A from './A';
        import Store from './Store';

        Store.subscribe();

        const Header = styled.div\`color: red\`
        const StyledFactory1 = styled('div')\`color: hotpink\`
        const StyledFactory2 = styled('div')({ color: 'hotpink' })
        const StyledFactory3 = styled(A)({ color: 'hotpink' })
        const FunnyFactory = funny.factory\`\`;

        let Alias1 = A;
        let Alias2 = A.Foo;
        const Dict = {};

        function Foo() {
          return (
            <div><A /><B /><StyledFactory1 /><StyledFactory2 /><StyledFactory3 /><Alias1 /><Alias2 /><Header /><Dict.X /></div>
          );
        }

        const B = hoc(A);
        // This is currently registered as a false positive:
        const NotAComponent = wow(A);
        // We could avoid it but it also doesn't hurt.
    `),
    ).toMatchSnapshot();
  });

  it('registers identifiers used in React.createElement at definition site', () => {
    // When in doubt, register variables that were used in JSX.
    // Foo, Header, and B get registered.
    // A doesn't get registered because it's not declared locally.
    // Alias doesn't get registered because its definition is just an identifier.
    expect(
      transform(`
        import A from './A';
        import Store from './Store';

        Store.subscribe();

        const Header = styled.div\`color: red\`
        const StyledFactory1 = styled('div')\`color: hotpink\`
        const StyledFactory2 = styled('div')({ color: 'hotpink' })
        const StyledFactory3 = styled(A)({ color: 'hotpink' })
        const FunnyFactory = funny.factory\`\`;

        let Alias1 = A;
        let Alias2 = A.Foo;
        const Dict = {};

        function Foo() {
          return [
            React.createElement(A),
            React.createElement(B),
            React.createElement(StyledFactory1),
            React.createElement(StyledFactory2),
            React.createElement(StyledFactory3),
            React.createElement(Alias1),
            React.createElement(Alias2),
            jsx(Header),
            React.createElement(Dict.X),
          ];
        }

        React.createContext(Store);

        const B = hoc(A);
        // This is currently registered as a false positive:
        const NotAComponent = wow(A);
        // We could avoid it but it also doesn't hurt.
    `),
    ).toMatchSnapshot();
  });

  it('registers capitalized identifiers in HOC calls', () => {
    expect(
      transform(`
        function Foo() {
          return <h1>Hi</h1>;
        }

        export default hoc(Foo);
        export const A = hoc(Foo);
        const B = hoc(Foo);
    `),
    ).toMatchSnapshot();
  });

  it('generates signatures for function declarations calling hooks', () => {
    expect(
      transform(`
        export default function App() {
          const [foo, setFoo] = useState(0);
          React.useEffect(() => {});
          return <h1>{foo}</h1>;
        }
    `),
    ).toMatchSnapshot();
  });

  it('generates signatures for function expressions calling hooks', () => {
    // Unlike __register__, we want to sign all functions -- not just top level.
    // This lets us support editing HOCs better.
    // For function declarations, __signature__ is called on next line.
    // For function expressions, it wraps the expression.
    // In order for this to work, __signature__ returns its first argument.
    expect(
      transform(`
        export const A = React.memo(React.forwardRef((props, ref) => {
          const [foo, setFoo] = useState(0);
          React.useEffect(() => {});
          return <h1 ref={ref}>{foo}</h1>;
        }));

        export const B = React.memo(React.forwardRef(function(props, ref) {
          const [foo, setFoo] = useState(0);
          React.useEffect(() => {});
          return <h1 ref={ref}>{foo}</h1>;
        }));

        function hoc() {
          return function Inner() {
            const [foo, setFoo] = useState(0);
            React.useEffect(() => {});
            return <h1 ref={ref}>{foo}</h1>;
          };
        }

        export let C = hoc();
    `),
    ).toMatchSnapshot();
  });

  it('includes custom hooks into the signatures', () => {
    expect(
      transform(`
        function useFancyState() {
          const [foo, setFoo] = React.useState(0);
          useFancyEffect();
          return foo;
        }

        const useFancyEffect = () => {
          React.useEffect(() => {});
        };

        export default function App() {
          const bar = useFancyState();
          return <h1>{bar}</h1>;
        }
    `),
    ).toMatchSnapshot();
  });

  it('includes custom hooks into the signatures when commonjs target is used', () => {
    // this test is passing with Babel 6
    // but would fail for Babel 7 _without_ custom hook node being cloned for signature
    expect(
      transform(
        `
        import {useFancyState} from './hooks';

        export default function App() {
          const bar = useFancyState();
          return <h1>{bar}</h1>;
        }
    `,
        {
          plugins: ['@babel/transform-modules-commonjs'],
        },
      ),
    ).toMatchSnapshot();
  });

  it('generates valid signature for exotic ways to call Hooks', () => {
    expect(
      transform(`
        import FancyHook from 'fancy';

        export default function App() {
          function useFancyState() {
            const [foo, setFoo] = React.useState(0);
            useFancyEffect();
            return foo;
          }
          const bar = useFancyState();
          const baz = FancyHook.useThing();
          React.useState();
          useThePlatform();
          return <h1>{bar}{baz}</h1>;
        }
    `),
    ).toMatchSnapshot();
  });

  it('does not consider require-like methods to be HOCs', () => {
    // None of these were declared in this file.
    // It's bad to register them because that would trigger
    // modules to execute in an environment with inline requires.
    // So we expect the transform to skip all of them even though
    // they are used in JSX.
    expect(
      transform(`
        const A = require('A');
        const B = foo ? require('X') : require('Y');
        const C = requireCond(gk, 'C');
        const D = import('D');

        export default function App() {
          return (
            <div>
              <A />
              <B />
              <C />
              <D />
            </div>
          );
        }
    `),
    ).toMatchSnapshot();
  });

  it('can handle implicit arrow returns', () => {
    expect(
      transform(`
        export default () => useContext(X);
        export const Foo = () => useContext(X);
        module.exports = () => useContext(X);
        const Bar = () => useContext(X);
        const Baz = memo(() => useContext(X));
        const Qux = () => (0, useContext(X));
      `),
    ).toMatchSnapshot();
  });

  it('uses custom identifiers for $RefreshReg$ and $RefreshSig$', () => {
    expect(
      transform(
        `export default function Bar () {
        useContext(X)
        return <Foo />
      };`,
        {
          freshOptions: {
            refreshReg: 'import.meta.refreshReg',
            refreshSig: 'import.meta.refreshSig',
          },
        },
      ),
    ).toMatchSnapshot();
  });

  it("respects Babel's envName option", () => {
    const envName = 'random';
    expect(() =>
      transform(`export default function BabelEnv () { return null };`, {
        envName,
        skipEnvCheck: false,
      }),
    ).toThrowError(
      'React Refresh Babel transform should only be enabled in development environment. ' +
        'Instead, the environment is: "' +
        envName +
        '". If you want to override this check, pass {skipEnvCheck: true} as plugin options.',
    );
  });

  it('does not get tripped by IIFEs', () => {
    expect(
      transform(`
        while (item) {
          (item => {
            useFoo();
          })(item);
        }
      `),
    ).toMatchSnapshot();
  });

  it('supports typescript namespace syntax', () => {
    expect(
      transform(
        `
        namespace Foo {
          export namespace Bar {
            export const A = () => {};

            function B() {};
            export const B1 = B;
          }

          export const C = () => {};
          export function D() {};

          namespace NotExported {
            export const E = () => {};
          }
        }
      `,
        {plugins: [['@babel/plugin-syntax-typescript', {isTSX: true}]]},
      ),
    ).toMatchSnapshot();
  });
});