Question

我正在使用React v15.4，babel-jest v18和酶v2.5.1

我有一个简单的React组件：

textView.isScrollEnabled = false

简单的Jest / Enzyme测试：

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)

Jest测试应该通过，但我收到错误：

方法“text”仅用于在单个节点上运行。 0发现代替。

我错过了什么？

===更新

快照测试通过：

/* 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')
  })
})

有没有办法在快照测试中整合酶期望测试？怎么样？

Answer 1

它的原因是浅层不会渲染子组件并且您的组件被函数包装。如此浅只返回函数的表示而不是组件的表示。您可以使用dive()来访问真实组件

npm install --save https://github.com/angular/material2-builds.git

Answer 2

有关浅表副本的使用方法，请参阅此链接。 https://blogs.sequoiainc.com/an-enzyme-gotcha/

下面是一个示例，其中查找类型为“ p”的节点/ html元素，其中包含所需的文本，该文本表示工资“ $ 100,000.00”。

displayemployee = shallow(<DisplayEmployee employeeData={employee}

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

浅表副本返回react组件返回的所有节点，而我正在使用.findWhere而不是.text搜索这些节点。这是因为.text希望通过单个节点进行浏览； .text不知道如何扫描许多节点。

Answer 3

使用.first（）

示例 const wrapper = shallow（）

wrapper.find（＆＃39; h1或p或.ClassName或＃id＆＃39;）。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')
 })
})

Answer 4

您还可以将“导出类”与“导出默认值”一起进行导入，并使用解构的导入版本在测试中导入组件。

例如：

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')
  })
})

酶：方法“text”仅用于在单个节点上运行。 0找到了

4 个答案: