酶：方法“文本”仅意味着在单个节点上是运行。 0 找到代替

Question

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

我有一个简单的 React 组件：

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/Enzyme测试：

/* 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 测试应该会通过，但出现错误：

Method “text” is only meant to be run on a single node. 0 found instead.

我错过了什么？

===更新

快照测试通过：

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

有没有办法将 enzyme expect 测试集成到快照测试中？以及如何？

Answer 1

这是由于 shallow 不渲染子组件并且您的组件被函数包装所致。如此浅薄，只有 returns 是功能的表示，而不是组件的表示。可以用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')
  })
})

Answer 2

使用.first()

例子 const wrapper = shallow()

wrapper.find('h1 or p or .ClassName or #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')
 })
})

Answer 3

请参阅此 link 了解如何在浅拷贝上使用 .findWhere： https://blogs.sequoiainc.com/an-enzyme-gotcha/

下面是一个查找类型为 "p" 的 nodes/html-elements 的示例，其中包含表示薪水“$100,000.00”的所需文本。

displayemployee = shallow(<DisplayEmployee employeeData={employee}

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

浅拷贝 returns 反应组件 returns 的所有节点，我正在使用 .findWhere 而不是 .text 搜索这些节点。这是因为 .text 期望查看单个节点； .text 不知道如何扫描 many 个节点。

Answer 4

您还可以 'export class' 连同 'export default' 并使用解构导入版本在测试中导入组件。

例如：

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 找到代替

Enzyme: Method “text” is only meant to be run on a single node. 0 found instead

reactjs

jestjs

enzyme

酶：方法“文本”仅意味着在单个节点上是 运行。 0 找到代替

Enzyme: Method “text” is only meant to be run on a single node. 0 found instead

reactjs

jestjs

enzyme

酶：方法“文本”仅意味着在单个节点上是运行。 0 找到代替