Тестирование класса React Component с помощью фермента

При тестировании компонента реакции, который использует className для установки класса css с помощью фермента (mount или shallow), я могу правильно протестировать, когда это div, но не могу заставить его работать с тегом h1.

Это какой-то

  • что делать с креплением или неглубоким?
  • Я что-то упустил?
  • Это ошибка?

Любые мысли приветствуются!

JSX:

import React from 'react'

export const PageNotFound = ({heading, content, wrapperCSS, headingCSS, contentCSS}) => (
<div className={ wrapperCSS }>
  <div className={ contentCSS }>
    { content }
  </div>
  <h1 className={ headingCSS }>{ heading }</h1>
</div>
)

PageNotFound.propTypes = {
    heading: React.PropTypes.string,
    content: React.PropTypes.string,
    wrapperCSS: React.PropTypes.string,
    headingCSS: React.PropTypes.string,
    contentCSS: React.PropTypes.string
};

PageNotFound.defaultProps = {
    heading: '404',
    content: 'Page Not Found',
    wrapperCSS: 'wrapper',
    headingCSS: 'heading',
    contentCSS: 'content'
};

export default PageNotFound

Спецификация:

import React from 'react'
import { expect } from 'chai'
import { shallow, mount } from 'enzyme'

import PageNotFound from './PageNotFound'

describe('<PageNotFound/>', function() {

let wrapper;

beforeEach(() => {
    wrapper = mount(<PageNotFound contentCSS="mycontent" headingCSS="myheader" content="Message" heading="My Title" />);
})

it('Uses heading prop', () => {
    expect(wrapper.find('h1').text()).to.eq('My Title')
});

it('Uses headingCSS prop', () => {
    console.log(wrapper.html());
    expect(wrapper.find('h1.myheader').length).to.eq(1)
});

it('Uses content prop', () => {
    expect(wrapper.find('div.mycontent').text()).to.eq('Message')
});


});

Результаты теста:

Обратите внимание на журнал отладки, который показывает h1 с классом myheader, но тест не проходит с нулевыми элементами, найденными для h1.myheader

<PageNotFound/>
    ✓ Uses heading prop
LOG LOG: '<div class="_2t--u"><h1 class="myheader">My Title</h1><div class="mycontent">Message</div></div>'
    ✗ Uses headingCSS prop
    expected 0 to equal 1
    [email protected]:11:24087
    [email protected]:14:52974
    [email protected]:14:55858
    tests.webpack.js:15:17123
    tests.webpack.js:14:10442

    ✓ Uses content prop

reactjs javascript enzyme
person stujo    schedule 20.07.2016    source источник

Ответы (2)


arrow_upward
5
arrow_downward

Странный. Он должен работать.

В любом случае, вы можете попробовать воспользоваться вместо этого Enzyme API.

В этом конкретном тесте .hasClass() должен выполнить свою работу и более четко определить его цель:

expect(wrapper.find('h1').hasClass('myheader')).to.eq(true)
person Rem Lampa    schedule 19.01.2017
comment
Спасибо, попробую, когда я снова среагирую! - person stujo; 20.01.2017

arrow_upward
2
arrow_downward

Проблема здесь в том, что ваш импорт import styles from './styles.module.css' на самом деле не загружается.

Вполне вероятно, что у вас есть что-то в файле тестовой установки, чтобы имитировать что-либо с расширением css:

require.extensions['.css'] = function () {
  return null;
};

У меня недостаточно репутации, иначе я бы просто прокомментировал это. К сожалению, я пока не знаю способа фактически импортировать эти стили, как вы можете понять из моего вопроса здесь: WebPack МЕНЬШЕ импортирует при тестировании с помощью Mocha

person Ryan27    schedule 20.07.2016
comment
Спасибо, я не думаю, что это проблема, я удалил ссылку на стили, но проблема все еще сохраняется. - person stujo; 22.07.2016