.net core 2.1 与反应测试

Question

我一直在开发 React 和 .net core 2.1 web api，并分别拥有它们。现在我只想在客户端运行测试，我不确定我想做的事情是否可行。我有 create-react-app 客户端应用程序，并且有一个测试可以呈现整个应用程序。

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

当我尝试在终端中运行 npm test 时，我的服务器正在运行。 （我尝试在 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 错误！测试失败。有关详细信息，请参见上文。

这是我的启动配置：

  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 test 时，我的服务器正在运行。 （我尝试在 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-

发生错误是因为您在测试中呈现的组件没有获得正确的 URL。比方说：

1. 您的 ASP.NET Core 监听 http://localhost:5001
2. 您的 React 开发服务器侦听端口 57301

当您通过npm test 运行测试时，它将渲染那些反应组件。但是，如果你的 react 组件在挂载时从服务器获取请求，它不知道正确的服务器端口，然后抛出 Network request failed 错误。

要修复错误，只需调用以下命令：

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

或将package.json 中的npm test 脚本更改为：

"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"
}

设置：

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