6

className を使用して酵素 (マウントまたは浅い) を使用して css クラスを設定する反応コンポーネントをテストする場合、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')
});


});

試験結果：

クラス myheader の h1 を示すデバッグ ログに注意してください。ただし、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
    r@tests.webpack.js:11:24087
    assert@tests.webpack.js:14:52974
    a@tests.webpack.js:14:55858
    tests.webpack.js:15:17123
    tests.webpack.js:14:10442

    ✓ Uses content prop
4

2 に答える 2

2

ここでの問題は、インポートimport styles from './styles.module.css'が実際にはロードされていないことです。

テスト セットアップ ファイルに、css 拡張子を持つものをモック化する何かがある可能性があります。

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

十分な担当者がいないか、これにコメントしただけです。残念ながら、これらのスタイルを実際にインポートする方法はまだわかりません。ここでの私の質問からわかるように: WebPack LESS imports when testing with Mocha

于 2016-07-20T18:10:00.673 に答える