Задать вопрос
@IvanKalinin

Как тестировать React компоненты с css модулями и Mocha+Enzyme?

Всем доброго времени.
Подскажите как правильно тестировать компоненты, в которых к имена классов динамические (localIdentName)?

webpack.config.js
{
  loader: 'css-loader',
  options: {
    importLoaders: 1,
    modules: true,
    localIdentName: '[name]__[local]_[hash:base64:5]',
  },
},


Пример компонента
import React, { Component, PropTypes } from 'react';
import cn from 'classnames';

import styles from './Checkbox.scss';

export default class Checkbox extends Component {
  static propTypes = {
    onChange: PropTypes.func,
    isChecked: PropTypes.bool,
    isDisabled: PropTypes.bool,
    label: PropTypes.string,
  };

  static defaultProps = {
    onChange: () => { console.log('on change event'); }, //eslint-disable-line
  }

  handlerClick = (e) => {
    e.preventDefault();
    const { onChange, isChecked } = this.props;
    onChange(!isChecked);
  }

  render() {
    const { isChecked, isDisabled, label } = this.props;
    return (
      <label
        className={cn(
          styles.checkbox,
          {
            [styles.checked]: isChecked,
            [styles.disabled]: isDisabled,
          }
        )}
      >
        <input
          type="checkbox"
          onChange={this.handlerClick}
          disabled={isDisabled}
        />
        { label ? <span>{label}</span> : null }
      </label>
    );
  }
}


Пример теста:
import React from 'react';
import { expect } from 'chai';
import { shallow, mount } from 'enzyme';
import { Checkbox } from '../../app/components/Checkbox';

describe('Component: Checkbox', () => {
  it('renders component', () => {
    expect(
      shallow(
        <Checkbox />
      )
    ).to.have.length(1);
  });

  it('is checked', () => {
    const wrapper = mount(<Checkbox isChecked />);
    expect(
      wrapper
      .find('input')
      .is('[class*="checked"]')
    ).to.equal(true);
  });
});


Результат теста:
1) Component: Checkbox is checked:

AssertionError: expected false to equal true
+ expected - actual

-false
+true

at Context. (test/components/Checkbox.test.js:22:74)
  • Вопрос задан
  • 444 просмотра
Подписаться 2 Средний Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы