Cypress и NextJS с использованием действий сервера React
Я пытаюсь перехватить запрос на стороне клиента, выполняемый компонентами React Server для моих тестов в Cypress.
Я думал, что это должно быть так же просто, как просмотреть и скопировать ответ на запрос (включая заголовки) на вкладке сети и скопировать его в функцию Cypress intercept, но я продолжаю получать ошибку Connection closed и результат запроса в журналах кода внешнего интерфейса undefined .
Есть идеи?
Моя текущая реализация intercept в моем тесте Cypress:
cy.intercept("POST", "/account/register", {
statusCode: 200,
headers: {
"x-action-revalidated": "[[],0,0]",
"content-type": "text/x-component",
},
body: `0:["$@1",["development",null]]\n1:{"result":"success","status":200,"data":{"id":"91ffe221-ace9-40a1-98d5-2851cb071cbd","name":"Test User","email":"[email protected]","createdAt":"$D2024-05-26T16:32:11.280Z","updatedAt":"$D2024-05-26T14:32:11.288Z"}}`,
}).as("registerRequest");
Сообщение об ошибке в моей консоли:
index-3fe21bb9.js:133640 Error: The following error originated from your application code, not from Cypress. It was caused by an unhandled promise rejection.
> Connection closed.
When Cypress detects uncaught errors originating from your application it will automatically fail the current test.
This behavior is configurable, and you can choose to turn this off by listening to the `uncaught:exception` event.
at close (webpack-internal:///app-pages-browser/./node_modules/next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-client.browser.development.js:2131:31)
at progress (webpack-internal:///app-pages-browser/./node_modules/next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-client.browser.development.js:2148:7)
From previous event:
at Promise.longStackTracesCaptureStackTrace [as _captureStackTrace] (http://localhost:3000/__cypress/runner/cypress_runner.js:3486:19)
at Promise._then (http://localhost:3000/__cypress/runner/cypress_runner.js:1239:17)
at Promise._passThrough (http://localhost:3000/__cypress/runner/cypress_runner.js:4110:17)
at Promise.lastly.Promise.finally (http://localhost:3000/__cypress/runner/cypress_runner.js:4119:17)
at Object.onRunnableRun (http://localhost:3000/__cypress/runner/cypress_runner.js:162793:53)
at $Cypress.action (http://localhost:3000/__cypress/runner/cypress_runner.js:41042:28)
at Runnable.run (http://localhost:3000/__cypress/runner/cypress_runner.js:145381:13)
at Runner.runTest (http://localhost:3000/__cypress/runner/cypress_runner.js:155323:10)
at http://localhost:3000/__cypress/runner/cypress_runner.js:155449:12
at next (http://localhost:3000/__cypress/runner/cypress_runner.js:155232:14)
at http://localhost:3000/__cypress/runner/cypress_runner.js:155242:7
at next (http://localhost:3000/__cypress/runner/cypress_runner.js:155144:14)
at http://localhost:3000/__cypress/runner/cypress_runner.js:155210:5
at timeslice (http://localhost:3000/__cypress/runner/cypress_runner.js:145721:27)
можно ли предоставить простой пример рабочего кода? может быть, на github или что-то в этом роде
Я вижу из документации Серверные компоненты позволяют переносить выборку данных на сервер, так это на самом деле запрос на стороне клиента? Могу объяснить Connection closed сообщение.
Итак, читая дальше, выборка «POST» всегда выполняется на стороне клиента.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Я понял это. При перехвате и возврате пользовательского ответа на запрос действия сервера React следует учитывать две вещи:
- Убедитесь, что заголовок
Content-Type: "text/x-component"присутствует в ответе. - Убедитесь, что в теле ответа есть новая строка в конце содержимого.
Второе — это то, чего мне не хватало.
Этот пример перехвата работает:
cy.intercept("POST", "/account/register", {
headers: {
"content-type": "text/x-component",
},
body: `0:["$@1",["development",null]]\n1:{"result":"success","status":200,"data":{"id":"982310j2","name":"Test User","email":"[email protected]","createdAt":"$D2024-05-26T16:32:11.280Z","updatedAt":"$D2024-05-26T14:32:11.288Z"}}\n`,
}).as("registerRequest");
Я опубликовал пример теста кипариса в репозитории с использованием React Server Actions, поэтому, если у кого-то все еще есть проблемы с имитированием ответа на действие сервера в cypress, они могут посмотреть мою реализацию здесь: https://github.com/terrabythia/cypress -server-action-test-example
Вы уверены, что text/x-component происходит от действия сервера, а не от серверного компонента? Это разные вещи.
Да, я уверен. Каждый заголовок ответа на действие сервера содержит значение text/x-component свойства content-type.
Попался, спасибо за подтверждение.
Должен ли Content-Type быть «текст/компонент» или «текст/x-компоненты»? также превентивное СПАСИБО!
Фрагмент правильный, и он должен работать как есть, поэтому text/component. Удачи! :)
Это сработало. Спасибо! И чтобы внести ясность, во фрагменте говорится: text/x-component нет text/component. Чтобы это работало, оно должно быть установлено как text/x-component. Ваш фрагмент выше верен, но первый пункт в вашем описании - нет. Спасибо! На днях я потратил на это пару часов с другим SE, и нам не хватало новой строки в конце. Кроме того, я пробовал не фрагмент, а пример из вашего репозитория по адресу github.com/terrabythia/cypress-server-action-test-example/blob/…, который немного отличается
@DrewLandgrave @morganney Да, извини. Я был неправ! Это text/x-component не text/component. Я не могу редактировать свой комментарий 3 комментария выше, но я изменил его в своем ответе. Извините за путаницу. Фрагмент и код в репозитории примеров уже были правильными.
Любые обновления по этому поводу. Столкнулся с этим сегодня. Состояние, возвращающееся из действия сервера, просто не устанавливается.