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

Question

好的，我有一个名为 <TestButton /> 的组件. <TestButton />里面有两个 Semantic UI React 组件，<Button />和 <Header> .

基本上，当 <Button>单击，它切换 display: none;至 <Header> .

我想检查(我想学习)如何断言 <Header>的 display: none;什么时候<Button>被点击。

测试按钮.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',
  );
});