Question

我想写一些规格来测试我的应用中的当前路由。我使用业力来运行我的规范和mocha作为测试框架。一切正常，直到我点击一些<Link />组件。事件onclick已启动，但它不会触发重新渲染我的组件，因此没有任何更改（应用程序不会呈现新的<Match />路由器）。我目前的代码：

<!-- language: lang-js -->
'use strict';
import React from 'react';
import { BrowserRouter, Match, Redirect } from 'react-router';
import { shallow, mount } from 'enzyme';
import sinon from 'sinon';
import chai, { expect } from 'chai';
import axios from 'axios';
import Main_Store from '../../main.store';
import Base from '../../components/base.component';

describe.only('--Routing--', () => {
   let main_store, wrap;
   beforeEach(() => {
      main_store = new Main_Store();
      wrap = mount(
         <MemoryRouter initialIndex={1} initialEntries={['/', '/kit']}>
            <Match pattern={'/:district'} render={(props) => {
                  console.log('trigger match');
                  return <Base {...props} main_store={main_store} />
               }
            } />
         </MemoryRouter>
      );
   });

   describe('click on link', () => {
      beforeEach(() => {
         wrap.find('Link').findWhere(n => n.prop('to') === '/kit/user-1/type-created').simulate('click');
      });

      it('render Profile Bar', () => {
         console.log('current html', wrap.html())
         expect(wrap.find('.personSidebar')).to.have.length(1);
      });
   });
});

当前事件日志

安装组件识别出它与当前路径名匹配。
第一次呈现组件。
触发onClick事件

并没有别的。在我的浏览器中，我再次收到1和2点，这意味着在点击链接后重新渲染组件树。但在我的测试中。 3点后没有任何事情发生。

Answer 1

<Link>组件需要左键单击事件（event.button = 0）。酶传递的默认事件不包括此。您可以向simulate调用添加事件对象，以正确配置模拟事件。

wrap.find('Link')
  .findWhere(n => n.prop('to') === '/kit/user-1/type-created')
  .simulate('click', {
    defaultPrevented: false,
    preventDefault() { this.defaultPrevented = true },
    metaKey: null,
    altKey: null,
    ctrlKey: null,
    shiftKey: null,
    button: 0
  });

react-router v4 Link在karma测试运行器中不起作用

1 个答案: