如何使用Jest + Enzyme测试React组件的样式？ [英] How can I test React component's style with Jest + Enzyme?

问题描述

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

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

基本上，当< Button> 被单击，它将显示：无; 切换为< Header> 。

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

我想检查（我想学习）如何声明< Header> 的显示：没有; 单击< Button> 时。

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

TestButton.js

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

但是它有此错误：

TypeError: Cannot read property 'have' of undefined

的属性'have'

推荐答案

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

There are a few mistakes in your provided code:

1. 您不应使用DOM元素的style属性，因为React无法对其进行管理。将隐藏的属性移到状态状态。

我相信 headerStyle 是样式对象的浅表副本。模拟点击后，它不会更新。您将不得不再次查询样式对象的元素。

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.

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

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

请在此处参考更正后的代码。如果将以下内容粘贴到 create-react-app ，它应该可以正常工作。

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

这篇关于如何使用Jest + Enzyme测试React组件的样式？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！