如何使用Jest + Enzyme测试React组件的样式?

时间:2018-01-02 04:48:31

标签: javascript reactjs enzyme jest semantic-ui-react

好吧,我有一个名为<TestButton />的组件。 <TestButton />内部有两个语义UI反应组件,<Button /><Header>

基本上,点击<Button>后,它会将display: none;切换为<Header>

我想检查(我想了解)如何在点击<Header>时断言display: none;&#39; <Button>

TestButton.js

const TestButton = (props) => {
  return (
    <div id='test-button'>
      <Header id='please-hide-me' size='huge'>Please Hide Me</Header>
      <Button
        onClick={
          () => {
            hiding = !hiding;
            let findDOM = document.getElementById(searchForThisID);
            if (findDOM) { findDOM.style.display = hiding ? 'none' : ''; }
            return hiding;
          }
        }
      >
        Sample Toggle
      </Button>
    </div>
  );
};

我的单元测试基于How to test style for a React component attribute with Enzyme。它看起来像这样:

test(`

  `, () => {
    const wrapper = shallow(<TestButton />);
    const button = wrapper.find('Button');
    const header = wrapper.find('Header');
    const headerStyle = header.get(0).style;

    expect(headerStyle).to.have.property('display', '');
    wrapper.find('Button').simulate('click');
    expect(headerStyle).to.have.property('display', 'none');
  }
);

但它有这个错误:

TypeError: Cannot read property 'have' of undefined

我该怎么办?

1 个答案:

答案 0 :(得分:3)

您提供的代码中存在一些错误:

  1. 您不应该使用DOM元素的样式属性,因为React不管理它。将hidden属性转换为state代替。

  2. 我相信headerStyle是样式对象的浅表副本。模拟单击后,它不会更新。您必须再次为样式对象查询元素。

  3. to.have.property无效Jest语法。它应该是toHaveProperty

  4. 请参阅此处更正的代码。如果您将以下内容粘贴到create-react-app中,它应该可以正常工作。

    <强> app.js

    import React, { Component } from 'react';
    
    function Header(props) {
      return <h1 style={props.style}>Header</h1>;
    }
    
    function Button(props) {
      return <button onClick={props.onClick}>Click Me</button>;
    }
    
    export class TestButton extends React.Component {
      constructor(props) {
        super(props);
        this.state = { hiding: false };
      }
    
      render() {
        return (
          <div>
            <Header
              id="please-hide-me"
              style={{
                display: this.state.hiding ? 'none' : '',
              }}
            >
              Please Hide Me
            </Header>
            <Button
              onClick={() => {
                this.setState({
                  hiding: !this.state.hiding,
                });
              }}
            >
              Sample Toggle
            </Button>
          </div>
        );
      }
    }
    
    class App extends Component {
      render() {
        return (
          <div className="App">
            <TestButton />
          </div>
        );
      }
    }
    
    export default App;
    

    <强> app.test.js

    import React from 'react';
    import ReactDOM from 'react-dom';
    import App from './App';
    import { configure, shallow } from 'enzyme';
    import Adapter from 'enzyme-adapter-react-16';
    
    configure({ adapter: new Adapter() });
    
    import { TestButton } from './App';
    
    it('renders without crashing', () => {
      const wrapper = shallow(<TestButton />);
      expect(wrapper.find('Header').get(0).props.style).toHaveProperty(
        'display',
        '',
      );
      wrapper.find('Button').simulate('click');
      expect(wrapper.find('Header').get(0).props.style).toHaveProperty(
        'display',
        'none',
      );
    });