Как я могу протестировать стиль компонента React с помощью Jest + Enzyme?

Хорошо, у меня есть компонент под названием <TestButton />. Внутри <TestButton /> есть два компонента Semantic UI React, <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>
  );
};

Мой модульный тест основан на Как проверить стиль для атрибута компонента React с 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

Что я должен делать?


reactjs javascript jestjs semantic-ui-react enzyme
person notalentgeek    schedule 02.01.2018    source источник

Ответы (1)


arrow_upward
6
arrow_downward

В предоставленном вами коде есть несколько ошибок:

  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',
  );
});
person Yangshun Tay    schedule 02.01.2018
comment
Это решает мою проблему! Спасибо. В любом случае, я могу использовать TestButton как const, а не как класс? Я узнал, что большинство разработчиков ReactJS используют только const в качестве компонента. Дополнительно: является ли использование встроенного стиля хорошей практикой ReactJS? - person notalentgeek; 08.01.2018
comment
Нет, он нужен вам как класс, потому что вам нужно хранить state. Чистый ванильный встроенный стиль React — это плохо, но если вы используете такие вещи, как модули CSS и jss, они выполняют некоторую постобработку, чтобы извлечь встроенные стили в таблицы стилей, что будет лучше. - person Yangshun Tay; 08.01.2018