在React Redux中进行测试

Question

我有public void ConfigureServices(IServiceCollection services) { services.AddAuthentication(sharedOptions => { sharedOptions.DefaultScheme = CookieAuthenticationDefaults.AuthenticationScheme; sharedOptions.DefaultChallengeScheme = OpenIdConnectDefaults.AuthenticationScheme; }) .AddAzureAd(options => Configuration.Bind("AzureAd", options)) .AddCookie(); services.AddMvc().SetCompatibilityVersion(CompatibilityVersion.Version_2_1); //services.AddSingleton<IHttpContextAccessor, HttpContextAccessor>(); // In production, the React files will be served from this directory services.AddSpaStaticFiles(configuration => { configuration.RootPath = "ClientApp/build"; }); } // This method gets called by the runtime. Use this method to configure the HTTP request pipeline. public void Configure(IApplicationBuilder app, IHostingEnvironment env) { if (env.IsDevelopment()) { app.UseDeveloperExceptionPage(); } else { app.UseExceptionHandler("/Error"); app.UseHsts(); } app.UseAuthentication(); 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"); } }); } 组件，如下所示。

Dashboard

我的测试如下所示

App.test.js

import React, { Component } from 'react';
import DataTable from './DataTable';
import { connect } from 'react-redux';

class Dashboard extends Component {
  render() {
    return <DataTable />;
  }
}

export default connect()(Dashboard);

我正在尝试使用此命令import React from 'react'; import ReactDOM from 'react-dom'; import Dashboard from './components/Dashboard'; it('renders without crashing', () => { const div = document.createElement('div'); ReactDOM.render(<Dashboard />, div); ReactDOM.unmountComponentAtNode(div); }); describe('Addition', () => { it('knows that 2 and 2 make 4', () => { expect(2 + 2).toBe(4); }); }); 进行测试。

我遇到错误了

npm test App.test.js

Answer 1

您的[values[i] for i,y in enumerate(list(map(is_int,values))) if y is False] 已连接到redux，这需要存储。您有两种可能：

• 使用Enzyme和redux-mock-store来配置要在安装组件时使用的存储。这不能很好地维护，并且导致Component与存储之间的强烈依赖。

• 导出未连接的仪表板（除了已连接的默认导出），然后安装（最终使用必需的道具）。这更简单且易于维护。

Dashboard

注意：我想您出于示例目的简化了export class Dashboard extends Component { render() { return <DataTable />; } } // Test : import { Dashboard } from './components/Dashboard'; ReactDOM.render(<Dashboard />, div); ，因为它在这里没有做任何事情，但是如果这是您的真正实现，则可以删除connect部分并仍然使用默认导出进行测试。