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

Question

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

基本上，当点击<Button>时，它会将display: none;切换到<Header>。

我想检查（我想学习）如何在点击<Header>时断言display: none;的<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

我该怎么办？

Answer 1

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

1. 您不应该使用DOM元素的样式属性，因为React不管理它。将hidden属性转换为state。
2. 我相信headerStyle是样式对象的浅层副本。模拟单击后，它不会更新。您必须再次为样式对象查询该元素。
3. to.have.property不是有效的Jest语法。它应该是toHaveProperty。

请在此处参阅更正后的代码。如果将以下内容粘贴到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',
  );
});