javascript - How can I test React component's style with Jest + Enzyme? - Stack Overflow

admin管理员组

文章数量:1345055

Alright I have a ponent called <TestButton />. Inside the <TestButton /> there are two Semantic UI React ponent, <Button /> and <Header>.

Basically, when the <Button> is clicked, it toggles display: none; to <Header>.

I want to check (I want to learn) on how to assert <Header>'s display: none; when <Button> is clicked.

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>
  );
};

My unit test is based on How to test style for a React ponent attribute with Enzyme. It looks like this:

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');
  }
);

But it has this error:

TypeError: Cannot read property 'have' of undefined

What should I do?

Alright I have a ponent called <TestButton />. Inside the <TestButton /> there are two Semantic UI React ponent, <Button /> and <Header>.

Basically, when the <Button> is clicked, it toggles display: none; to <Header>.

I want to check (I want to learn) on how to assert <Header>'s display: none; when <Button> is clicked.

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>
  );
};

My unit test is based on How to test style for a React ponent attribute with Enzyme. It looks like this:

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');
  }
);

But it has this error:

TypeError: Cannot read property 'have' of undefined

What should I do?

• javascript
• reactjs
• enzyme
• jestjs
• semantic-ui-react

Share Improve this question Follow edited Jan 2, 2018 at 6:41 Yangshun Tay 53.3k3333 gold badges123123 silver badges150150 bronze badges asked Jan 2, 2018 at 4:48 notalentgeeknotalentgeek 5,8491212 gold badges4040 silver badges5959 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

There are a few mistakes in your provided code:

1. You should not be using DOM element's style property because React does not manage it. Shift the hidden property into the state instead.

2. I believe headerStyle is a shallow copy of the style object. After you simulate click, it does not get updated. You will have to query the element again for the style object.

3. to.have.property is not valid Jest syntax. It should be toHaveProperty.

Please refer to the corrected code here. If you paste the following into create-react-app, it should just work.

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',
  );
});

本文标签： javascriptHow can I test React component39s style with JestEnzymeStack Overflow