Question

我正在使用酶+ mocha + chai来测试我的react-redux项目。酶提供浅层测试组分行为。但我没有找到测试路由器的方法。我正在使用react-router，如下所示：

public class MyService extends Service {


public String description;
public int image1;
public int image2;


@Nullable
@Override
public IBinder onBind(Intent intent) {
    return null;
}

public void onCreate() {
    super.onCreate();

}

@Override
public int onStartCommand(Intent intent, int flags, int startId) {

    DetailActivity i ;
    i = new DetailActivity();
    Bundle extras = i.getextras1();
    TextView descriptionofapp = i.getdescriptionofapp1();
    ImageView image1ofapp  = i.getImage1ofapp1();
    ImageView image2ofapp = i.getImage2ofapp1();



    if ( extras.containsKey("des")){

        description = extras.getString("appdescipl");
        descriptionofapp.setText(description);
        image1 = extras.getInt("imagesList");
        image1ofapp.setImageResource(image1);
        image2 = extras.getInt("imagesList2");
        image2ofapp.setImageResource(image2);
    }

    else if (extras.containsKey("data")){
        description = extras.getString("appdatadescipl");
        descriptionofapp.setText(description);
        image1 = extras.getInt("imagesOfLists");
        image1ofapp.setImageResource(image1);
        image2 = extras.getInt("imagesOfLists2");
        image2ofapp.setImageResource(image2);
    }

    this.onDestroy();
    return START_STICKY;
}


@Override
public void onDestroy() {

    this.stopSelf();
}
}

我想测试此路线<Router history={browserHistory}> ... <Route path="nurse/authorization" component{NurseAuthorization}/> ... </Route>参考nurse/authorization组件。如何在reactjs项目中测试它？

EDIT1

我使用NurseAuthorization作为路由器框架。

Answer 1

您可以将路由器包装在组件中以进行测试。

Routes.jsx

export default props => (
  <Router history={browserHistory}>
    ...
    <Route path="nurse/authorization" component{NurseAuthorization}/>
    ...
  </Route>
)

index.js

import Routes from './Routes.jsx';
...

ReactDOM.render(<Routes />, document.getElementById('root'));

然后你必须浅显示你的Routes组件，并且你能够创建一个对象图来检查路径和相关组件之间的对应关系。

Routes.test.js

import { shallow } from 'enzyme';
import { Route } from 'react-router';
import Routes from './Routes.jsx';
import NurseAuthorization from './NurseAuthorization.jsx';

it('renders correct routes', () => {
  const wrapper = shallow(<Routes />);
  const pathMap = wrapper.find(Route).reduce((pathMap, route) => {
    const routeProps = route.props();
    pathMap[routeProps.path] = routeProps.component;
    return pathMap;
  }, {});
  // { 'nurse/authorization' : NurseAuthorization, ... }

  expect(pathMap['nurse/authorization']).toBe(NurseAuthorization);
});

Answer 2

仅在成功渲染组件后才能通过：它可以与Redux和包含钩子的react-router一起使用。

import React from "react";

import { expect } from "chai";
import { mount } from "enzyme";
import { MemoryRouter, Route } from "react-router-dom";
import { createMockStore } from "redux-test-utils";
import { Provider } from "react-redux";


...
describe("<MyComponent />", () => {
    it("renders the component", () => {
    let props = {
      index: 1,
      value: 1
    };
    let state = {};

    const wrapper = mount(
      <Provider store={createMockStore(state)}>
        <MemoryRouter initialEntries={["/s/parameter1"]}>
          <Route path="/s/:camera">
            <MyComponent {...props} />
          </Route>
        </MemoryRouter>
      </Provider>
    );

    expect(wrapper.find(ProcessedFrames.WrappedComponent)).to.have.lengthOf(1);
  });
});

Answer 3

我在动态路由器的另一个文件中定义了我的路径，所以我也测试我在路径中呈现的所有路由都是在我的paths.js常量中定义的：

it('Routes should only have paths declared in src/routing/paths.js', () => {
  const isDeclaredInPaths = (element, index, array) => {
    return pathsDefined.indexOf(array[index]) >= 0;
  }
  expect(routesDefined.every(isDeclaredInPaths)).to.be.true;
});

如何用酶测试反应路由器

3 个答案: