facebook / facebook/relay

Relay tests - Request getting stacked on suspense

Open
#4,041 0 comments 1 reaction 0 assignees View on GitHub
Dominant language
Rust
Stars
19k
Forks
1.9k
PR merge metrics
No merged PRs in 30d

Description

## Reporting issues with Relay
I am trying to test my React app but I am having some issues when testing a specific query that works as expected when running the app.

This is the test that is failing:
```

test("Render Calculated table", async () => {
const environment = createMockEnvironment({ handlerProvider });
const serialNumber = "1234";

environment.mock.queuePendingOperation(
DeviceConfigurationsBySerialNumberQuery,
serialNumberFilterGraphQL(serialNumber)
);

render(





);

ReactTestRenderer.act(() => {
environment.mock.resolveMostRecentOperation((operation: any) =>
MockPayloadGenerator.generate(operation)
);
});

await waitForElementToBeRemoved(() => screen.queryByText(/Searching.../i));

expect(screen.getByText("Viewing")).toBeTruthy();
});
```
Results:
image

This is the code that I use on the app that is working perfectly:
```
const CalculatedContent: React.FC = ({ serialNumber }) => {
const { deviceConfigurationsBySerialNumber } =
useLazyLoadQuery(
DeviceConfigurationsBySerialNumberQuery,
serialNumberFilterGraphQL(serialNumber)
);

return deviceConfigurationsBySerialNumber ? (
<>Something
) : (

);
};
```

@sibelius suggested adding a log on the environment to check what's happening, but I did not find the correct way to do this with createMockEnvironment().
Any idea on how to fix this or check what's happening with this will be really useful for me.

My dependencies on package.json:
```
"dependencies": {
"@testing-library/jest-dom": "^5.16.4",
"@testing-library/react": "^13.3.0",
"@testing-library/user-event": "^14.4.1",
"@types/jest": "^28.1.6",
"@types/react-test-renderer": "^18.0.0",
"@types/relay-test-utils": "^6.0.5",
"axios": "^0.27.2",
"jest": "^28.1.3",
"js-base64": "^3.7.2",
"luxon": "^3.0.1",
"mobx": "^6.3.5",
"mobx-react-lite": "^3.2.1",
"oidc-client": "^1.11.5",
"react": "^18.1.0",
"react-device-detect": "^2.2.2",
"react-router-dom": "^6.3.0",
"react-test-renderer": "^18.2.0",
"relay-test-utils": "^14.1.0",
"styled-components": "^5.3.3"
},
"devDependencies": {
"@types/lodash": "^4.14.182",
"@types/luxon": "^3.0.0",
"@types/react": "^18.0.9",
"@types/react-dom": "^18.0.1",
"@types/react-relay": "^13.0.0",
"@types/react-router-dom": "^5.1.7",
"@types/relay-runtime": "^13.0.0",
"@types/styled-components": "^5.1.25",
"@types/testing-library__jest-dom": "^5.14.5",
"@types/testing-library__react": "^10.2.0",
"babel-plugin-relay": "^14.0.0",
"env-cmd": "^10.1.0",
"lodash": "^4.17.21",
"prettier": "2.6.2",
"react-app-rewired": "^2.1.8",
"react-dom": "^18.0.0",
"react-relay": "^14.0.0",
"react-scripts": "^5.0.1",
"relay-compiler": "^14.0.0",
"relay-runtime": "^14.0.0",
"ts-jest": "^28.0.7",
"typescript": "^4.3.2"
},
```

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.