Question

努力了解如何测试由样式化组件构成的组件。

import React from 'react';
import { shallow } from 'enzyme';
import Picker from '../CurrencyPicker';

describe('Test Language/Currency Dropdown', () => {
  it('On Click open the dropddown menu and check that the state is true.', () => {
    const output = shallow(<Picker />);

    expect(output.state().dropdown).toEqual(false);
    output.simulate('click');
    expect(output.state().dropdown).toEqual(true);
  });
});

这是我的测试，我只想检查下面的选择器组件中状态下拉列表是否从false更改为true：

const NavLinkContainer = styled.span`
  &:focus { outline: none; }
`;

export default class CurrencyPicker extends React.Component {
  constructor(props) {
  super(props);

  this.state = { dropdown: false };

  this.toggleDropdown = this.toggleDropdown.bind(this);
}

toggleDropdown(event) {
  event.preventDefault();

  this.setState({
    dropdown: !this.state.dropdown,
  });
}

render() {
  return (
    <NavLinkContainer
      onClick={this.toggleDropdown}
      role="menuitem"
      tabIndex="0"
    >
      test
    </NavLinkContainer>
  );
 }
}

我想，如果我模拟对组件的单击，它将知道我将谈论组件中的唯一click事件。

从其他测试来看，我似乎打算使用 find（）进入NavLinkContainer。

类似这样：

const link = wrapper.find('NavLinkContainer')

然后模拟链接而不是包装上的单击。两种解决方案我都没有运气。我想知道样式化的组件是否会导致我通常无法获得的测试问题，或者更有可能是我在文档中缺少了某些东西。

Ta

开玩笑-如何通过样式化组件测试状态属性是否已更改

0 个答案: