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

问题描述

好的，我有一个名为< 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语法无效。它应该是。

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

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