.net core 2.1 с тестированием реакции

Question

Я занимаюсь разработкой веб-API React и .net core 2.1, и они у меня есть отдельно.Теперь я хотел бы запускать тесты только на стороне клиента и не уверен, возможно ли то, что я хочу сделать.У меня есть клиентское приложение create-реагировать на приложение, и есть один тест, который отображает все приложение.

it("renders without crashing", () => {
  const div = document.createElement("div");
  ReactDOM.render(<App />, div);
});

Когда я пытаюсь запустить тест npm в терминале, у меня работает сервер.(Я попытался запустить его в Visual Studio и в cmd с dotnet run. Все, что он делает, это эта ошибка:

TypeError: Network request failed
at XMLHttpRequest.xhr.onerror (C:\Users\Tomas\source\repos\ReactGoalTrackingWebsite\ReactGoalTrackingWebsite\ClientApp\node_modules\whatwg-fetch\fetch.js:436:16)alTrackingWebsite\ClientApp\node_modules\whatwg-fetch\fetch.js:436:16)                         ingWebsite\ReactGoalTrackingWebsite\ClientApp\node_modules\jsdom\lib\jsdom\living\events\EventTarget-impl.js:289:32)
at XMLHttpRequest.callback.(anonymous function) (C:\Users\Tomas\source\repos\ReactGoalTrackkingWebsite\ClientApp\node_modules\jsdom\lib\jsdom\living\events\EventTarget-impl.js:219:27)ingWebsite\ReactGoalTrackingWebsite\ClientApp\node_modules\jsdom\lib\jsdom\living\events\EventTckingWebsite\ClientApp\node_modules\jsdom\lib\jsdom\living\events\EventTarget-impl.js:166:7)arget-impl.js:289:32)                                                                          lTrackingWebsite\ClientApp\node_modules\jsdom\lib\jsdom\living\events\EventTarget-impl.js:122:7)
at invokeEventListeners (C:\Users\Tomas\source\repos\ReactGoalTrackingWebsite\ReactGoalTractGoalTrackingWebsite\ClientApp\node_modules\jsdom\lib\jsdom\living\events\EventTarget-impl.js:87:17)kingWebsite\ClientApp\node_modules\jsdom\lib\jsdom\living\events\EventTarget-impl.js:219:27)   GoalTrackingWebsite\ClientApp\node_modules\jsdom\lib\jsdom\living\generated\EventTarget.js:61:35)
at invokeInlineListeners (C:\Users\Tomas\source\repos\ReactGoalTrackingWebsite\ReactGoalTrakingWebsite\ClientApp\node_modules\jsdom\lib\jsdom\living\xmlhttprequest.js:405:16)ckingWebsite\ClientApp\node_modules\jsdom\lib\jsdom\living\events\EventTarget-impl.js:166:7)   ite\ClientApp\node_modules\jsdom\lib\jsdom\living\xhr-utils.js:315:13)
at EventTargetImpl._dispatch (C:\Users\Tomas\source\repos\ReactGoalTrackingWebsite\ReactGoakingWebsite\ClientApp\node_modules\jsdom\lib\jsdom\living\nodes\Document-impl.js:146:21)lTrackingWebsite\ClientApp\node_modules\jsdom\lib\jsdom\living\events\EventTarget-impl.js:122:7ite\ClientApp\node_modules\jsdom\lib\jsdom\browser\Window.js:362:29))                                                                                              TrackingWebsite\ClientApp\node_modules\jest-environment-jsdom\build\index.js:44:19)
at EventTargetImpl.dispatchEvent (C:\Users\Tomas\source\repos\ReactGoalTrackingWebsite\ReackingWebsite\ClientApp\node_modules\jest\node_modules\jest-cli\build\runTest.js:102:17)tGoalTrackingWebsite\ClientApp\node_modules\jsdom\lib\jsdom\living\events\EventTarget-impl.js:87:17)
at XMLHttpRequest.dispatchEvent (C:\Users\Tomas\source\repos\ReactGoalTrackingWebsite\ReactGoalTrackingWebsite\ClientApp\node_modules\jsdom\lib\jsdom\living\generated\EventTarget.js:61:35)    at XMLHttpRequest.abort (C:\Users\Tomas\source\repos\ReactGoalTrackingWebsite\ReactGoalTrackingWebsite\ClientApp\node_modules\jsdom\lib\jsdom\living\xmlhttprequest.js:405:16)    at Object.abort (C:\Users\Tomas\source\repos\ReactGoalTrackingWebsite\ReactGoalTrackingWebsite\ClientApp\node_modules\jsdom\lib\jsdom\living\xhr-utils.js:315:13)
at RequestManager.close (C:\Users\Tomas\source\repos\ReactGoalTrackingWebsite\ReactGoalTrackingWebsite\ClientApp\node_modules\jsdom\lib\jsdom\living\nodes\Document-impl.js:146:21)    at Window.close (C:\Users\Tomas\source\repos\ReactGoalTrackingWebsite\ReactGoalTrackingWebsite\ClientApp\node_modules\jsdom\lib\jsdom\browser\Window.js:362:29)
at JSDOMEnvironment.dispose (C:\Users\Tomas\source\repos\ReactGoalTrackingWebsite\ReactGoalTrackingWebsite\ClientApp\node_modules\jest-environment-jsdom\build\index.js:44:19)    at Promise.resolve.then (C:\Users\Tomas\source\repos\ReactGoalTrackingWebsite\ReactGoalTrackingWebsite\ClientApp\node_modules\jest\node_modules\jest-cli\build\runTest.js:102:17)
at <anonymous>    at process._tickCallback (internal/process/next_tick.js:188:7)

npm ERR! Тест не пройден. Подробнее см. Выше.

Вот моя начальная конфигурация:

  public void Configure(IApplicationBuilder app, IHostingEnvironment env)
    {
        if (env.IsDevelopment())
        {
            app.UseDeveloperExceptionPage();
        }
        else
        {
            app.UseHsts();
        }

        app.UseHttpsRedirection();
        app.UseStaticFiles();
        app.UseSpaStaticFiles();

        app.UseMvc(routes =>
        {
            routes.MapRoute(
                name: "default",
                template: "{controller}/{action=Index}/{id?}");
        });

        app.UseSpa(spa =>
        {
            spa.Options.SourcePath = "ClientApp";

            if (env.IsDevelopment())
            {
                spa.UseReactDevelopmentServer(npmScript: "start");
            }
        });
    }

Моя конфигурация неверна?

Answer 1

Когда я пытаюсь запустить тест npm в терминале, у меня работает сервер.(Я попытался запустить его в Visual Studio и в cmd с запуском dotnet. Все, что он делает, - это ошибка:

   TypeError: Network request failed
   at XMLHttpRequest.xhr.onerror (C:\Users\Tomas\source\repos\ReactGoalTrackingWebsite\ReactGoalTrackingWebsite\ClientApp\node_modules\whatwg-fetch\fetch.js:436:16)alTrackingWebsite\ClientApp\node_modules\whatwg-

Ошибка возникает из-за того, что компоненты, отрисованные в тесте, не получают правильный URL-адресДопустим,

1. Ваше ядро ​​ASP.NET прослушивает http://localhost:5001
2. Сервер React Dev прослушивает порт 57301

Когда вы запускаетеПротестируйте npm test, он отобразит эти реагирующие компоненты, однако, если ваши реагирующие компоненты извлекают запросы с сервера при подключении, не имеет представления о правильном порте сервера, а затем выдает ошибку Network request failed.

Чтобы исправить ошибку, просто вызовите следующую команду:

react-scripts test --env=jsdom --testURL=https://localhost:50001/

Или измените скрипт npm test в вашем package.json на:

"scripts": {
    "start": "rimraf ./build && react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom --testURL=https://localhost:50001/",
    "eject": "react-scripts eject"
}

Обновление:

Если вы используете fetch api, не забудьте смоделировать fetch:

"devDependencies": {
    "jest-fetch-mock": "^1.6.6"
}

setup:

global.fetch = require('jest-fetch-mock')