MacroError: The macro you imported from "undefined" is being executed outside the context of compilation with babel-plugin-macros. This indicates that you don't have the babel plugin "babel-plugin-macros" configured correctly. Please see the documentation for how to configure babel-plugin-macros properly: https://github.com/kentcdodds/babel-plugin-macros/blob/master/other/docs/user.md

[pt147]

Hello Guys, Does anyone has a solution on how to solve this issue?

App.test.tsx

import React from "react";
import { RelayEnvironmentProvider } from "react-relay";
import App from "./App";
import { createMockEnvironment } from "relay-test-utils";
import TestRenderer from "react-test-renderer"; // ES6

test("Loading State", () => {
  const environment = createMockEnvironment();

  const MyTestRender = () => {
    return (
      <RelayEnvironmentProvider environment={environment}>
        <App />
      </RelayEnvironmentProvider>
    );
  };
  const renderer = TestRenderer.create(<MyTestRender />);

  // Here we just verify that the spinner is rendered
  expect(
    renderer.root.find((node) => node.props["data-testid"] === "spinner")
  ).toBeDefined();
});

App.tsx

import React from "react";
import "./App.css";
import  graphql from "babel-plugin-relay/macro";
import { useLazyLoadQuery } from "react-relay";
import type { AppQuery as AppQueryType } from "./__generated__/AppQuery.graphql";
import LoadingSpinner from "./LoadingSpinner";

const AppQuery = graphql`
  query AppQuery {
    continents {
      code
      name
    }
  }
`;

function App() {
  const data = useLazyLoadQuery<AppQueryType>(AppQuery, {});
  const continents = data.continents;

  return (
    <React.Suspense fallback={<LoadingSpinner />}>
      <div className="App">
        {continents?.map((continent) => {
          return (
            <div className="continets">
              <div>{continent?.name}</div>
              <div>{continent?.code}</div>
            </div>
          );
        })}
      </div>
    </React.Suspense>
  );
}

export default App;

Package,json

{
  "name": "poc-graphql-relay",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^6.4.2",
    "@testing-library/react": "^13.0.0",
    "@testing-library/user-event": "^13.2.1",
    "@types/jest": "^27.0.1",
    "@types/node": "^16.7.13",
    "@types/react": "^18.0.0",
    "@types/react-dom": "^18.0.0",
    "graphql-tag": "^2.12.6",
    "jest-transform-graphql": "^2.1.0",
    "msw": "^2.2.13",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-modal": "^3.16.1",
    "react-scripts": "5.0.1",
    "ts-jest": "^29.1.2",
    "ts-node": "^10.9.2",
    "typescript": "^4.4.2",
    "web-vitals": "^2.1.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "relay-compiler --validate && react-scripts build",
    "test": "jest",
    "eject": "react-scripts eject",
    "relay": "relay-compiler"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@babel/preset-env": "^7.24.4",
    "@babel/preset-react": "^7.24.1",
    "@types/react-relay": "16.0.6",
    "@types/react-test-renderer": "^18.0.7",
    "@types/relay-runtime": "14.1.23",
    "@types/relay-test-utils": "^14.1.4",
    "babel-jest": "^29.7.0",
    "babel-plugin-macros": "^3.1.0",
    "babel-plugin-relay": "^16.2.0",
    "graphql": "^16.8.1",
    "identity-obj-proxy": "^3.0.0",
    "jest": "^29.7.0",
    "react-relay": "^16.2.0",
    "react-test-renderer": "^18.2.0",
    "relay-compiler": "^16.2.0",
    "relay-runtime": "^16.2.0",
    "relay-test-utils": "^16.2.0"
  }
}

react-app-env.d.ts

/// <reference types="react-scripts" />


declare module "babel-plugin-relay/macro" {
  export { graphql as default } from "react-relay";
}

.babelrc

{
    "plugins": [["relay", { "artifactDirectory": "./src/__generated__" }]]
  }