relay
relay copied to clipboard
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
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__" }]]
}