gpt4 book ai didi

reactjs - .net 核心 2.1 与 react 测试

转载 作者:行者123 更新时间:2023-11-28 20:10:34 26 4
gpt4 key购买 nike

我一直在开发 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");
}
});
}

我的配置不正确吗?

最佳答案

When I try to run npm test in the terminal, I have the server running. (I tried running it in visual studio and in cmd with dotnet run. All it does is this error:

   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 Dev Server 监听端口 57301

当您通过 npm test 运行测试时,它会渲染那些 React 组件。但是,如果您的 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')

关于reactjs - .net 核心 2.1 与 react 测试,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52827438/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com