Question

我有一个当前包装有withRouter的组件（例如，我使用export default withRouter(myComponent)），因为我需要对组件中的其中一个链接使用history.push。我正在用酶编写一个测试，测试用户单击该组件中的按钮是否将其状态更改为true / false。测试失败，并显示错误消息，即它无法读取isExpanded的null属性。这就是我要测试的内容：

import React from 'react';
import Adapter from 'enzyme-adapter-react-16';
import { mount, configure } from 'enzyme';
import { MemoryRouter } from 'react-router-dom';
import myComponent from './myComponent';

configure({ adapter: new Adapter() });

 describe('Successful flows', () => {
   test('button changes state when clicked', () => {
    const wrapper = mount(<MemoryRouter><myComponent /></MemoryRouter>);
    const moreBtn = wrapper.find('.seeMoreButton').at(0);
    moreBtn.simulate('click');
    expect(wrapper.state().isExpanded).toEqual(true);
  });
});

我发现在我与Router一起使用并且在测试中仅使用const wrapper = mount(<myComponent />);之前，该测试已通过。我对路由还很陌生，感觉这里缺少一些东西，所以对您的帮助将不胜感激。

Answer 1

您正在检查错误组件的状态，mount的结果将是MemoryRouter，而不是myComponent。

安装组件后，您需要找到myComponent并验证其状态

test('button changes state when clicked', () => {
  const wrapper = mount(<MemoryRouter><myComponent /></MemoryRouter>);
  const comp = wrapper.find(myComponent);
  const moreBtn = comp.find('.seeMoreButton').at(0);
  moreBtn.simulate('click');
  expect(comp.state().isExpanded).toEqual(true);
});

使用withRouter-wrapped组件测试按钮的状态

1 个答案: