web-dev-qa-db-ja.com

酵素：メソッド「テキスト」は、単一のノードで実行することのみを目的としています。代わりに0が見つかりました

React v15.4、babel-jest v18、および酵素v2.5.1を使用しています。

私は単純なReact Componentを持っています：

import React, {Component} from 'react'
import {FormattedRelative} from 'react-intl'
import pageWithIntl from '../components/PageWithIntl'
import Layout from '../components/Layout'

class About extends Component {
  static async getInitialProps ({req}) {
    return {someDate: Date.now()}
  }

  render () {
    return (
      <Layout>
        <h1>About</h1>
        <p>
          <FormattedRelative
            value={this.props.someDate}
            updateInterval={1000}
          />
        </p>
      </Layout>
    )
  }
}

export default pageWithIntl(About)

そして、簡単なジェスト/酵素テスト：

/* global it, expect, describe */

import React from 'react'
import { shallow } from 'enzyme'
import renderer from 'react-test-renderer'
import About from '../pages/about.js'

describe('With Enzyme', () => {
  it('App shows "About"', () => {
    const about = shallow(
      <About />
    )
    expect(about.find('h1').text()).toEqual('About')
  })
})

Jestテストはパスするはずですが、エラーが発生します。

メソッド「テキスト」は、単一のノードで実行することのみを目的としています。代わりに0が見つかりました。

何が欠けていますか？

===更新

スナップショットテストに合格：

describe('With Snapshot Testing', () => {
  it('About shows "About"', () => {
    const component = renderer.create(<About />)
    const tree = component.toJSON()
    expect(tree).toMatchSnapshot()
  })
})

スナップショットテスト内に酵素期待テストを統合する方法はありますか？そしてどうやって？

reactjsjestjsenzyme
14
StandardNerd

これは、シャローが子コンポーネントをレンダリングせず、コンポーネントが関数によってラップされているために発生します。そのため、shallowは、コンポーネントではなく関数の表現のみを返します。 dive() を使用して実際のコンポーネントに到達できます

/* global it, expect, describe */

import React from 'react'
import { shallow } from 'enzyme'
import renderer from 'react-test-renderer'
import About from '../pages/about.js'

describe('With Enzyme', () => {
  it('App shows "About"', () => {
    const about = shallow(
      <About />
    ).dive()
    expect(about.find('h1').text()).toEqual('About')
  })
})
9
Andreas Köberle

浅いコピーで.findWhereを使用する方法については、このリンクを参照してください： https://blogs.sequoiainc.com/an-enzyme-gotcha/

以下は、給与 "$ 100,000.00"を表す目的のテキストを含む、タイプ "p"のノード/ html要素を探す例です。

displayemployee = shallow(<DisplayEmployee employeeData={employee}

it('renders the employees salary', () => {
  expect(
    displayemployee.findWhere(
    n => n.type() === 'p' && n.contains('$100,000.00')
  )
)

浅いコピーは、reactコンポーネントが返すすべてのノードを返します。私は、これらのノードを.textではなく.findWhereで検索しています。これは、.textがsingleノードを検索することを期待しているためです。 .textは多くのノードをスキャンする方法を知りません。

3
kat

。first（）を使用

例const wrapper = shallow（）

wrapper.find（ 'h1またはpまたは.ClassNameまたは#id'）。first（）;

import React from 'react'
import { shallow } from 'enzyme'
import renderer from 'react-test-renderer'
import About from '../pages/about.js'

describe('With Enzyme', () => {
  it('App shows "About"', () => {
    const about = shallow(
      <About />
   )
  expect(about.find('h1').first().text()).toEqual('About')
 })
})
1
D V Yogesh

'export default'とともに 'export class'を使用して、構造化インポートバージョンをテストするコンポーネントをインポートすることもできます。

例えば：

import React, {Component} from 'react'
import {FormattedRelative} from 'react-intl'
import pageWithIntl from '../components/PageWithIntl'
import Layout from '../components/Layout'

export class About extends Component {
  static async getInitialProps ({req}) {
    return {someDate: Date.now()}
  }

  render () {
    return (
      <Layout>
        <h1>About</h1>
        <p>
          <FormattedRelative
            value={this.props.someDate}
            updateInterval={1000}
          />
        </p>
      </Layout>
    )
  }
}

export default pageWithIntl(About)

そしてテスト：

/* global it, expect, describe */

import React from 'react'
import { shallow } from 'enzyme'
import renderer from 'react-test-renderer'
import { About } from '../pages/about.js'

describe('With Enzyme', () => {
  it('App shows "About"', () => {
    const about = shallow(
      <About />
    )
    expect(about.find('h1').text()).toEqual('About')
  })
})
0
pariskwsto