Reactjs 酶：方法&x201C；文本”；只能在单个节点上运行。改为找到0

我使用的是React v15.4、babel jest v18和Ezyme v2.5.1

我有一个简单的反应组件：

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)

import React，{Component}来自“React”
从“react intl”导入{FormattedRelative}
从“../components/pageWithIntl”导入pageWithIntl
从“../components/Layout”导入布局
类关于扩展组件{
静态异步getInitialProps（{req}）{
返回{someDate:Date.now（）}
}
渲染（）{
返回(
关于


)
}
}
导出默认页面WithIntl（关于）

还有一个简单的玩笑/酶测试：

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

/*全球it、预期、描述*/
从“React”导入React
从“酶”导入{shall}
从“反应测试渲染器”导入渲染器
从“../pages/About.js”导入关于
描述（'用酶'，（）=>{
它（'应用程序显示“关于”，（）=>{
常数约=浅(
)
expect（about.find（'h1'）.text（））.toEqual（'about'））
})
})

Jest测试应该通过，但我得到一个错误：

方法“text”只能在单个节点上运行。0找到 相反

我错过了什么

==更新

快照测试通过了：

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

description（'使用快照测试'，（）=>{
它（'关于显示'关于'，（）=>{
const component=renderer.create（）
const tree=component.toJSON（）
expect（tree.toMatchSnapshot（））
})
})

---

是否有一种方法可以将酶expect测试集成到快照测试中？怎么做呢？

这是因为shallow不呈现子组件，并且组件被函数包装。所以shallow只返回函数的表示，而不是组件的表示。 您可以使用来访问真实的组件

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

/*全球it、预期、描述*/
从“React”导入React
从“酶”导入{shall}
从“反应测试渲染器”导入渲染器
从“../pages/About.js”导入关于
描述（'用酶'，（）=>{
它（'应用程序显示“关于”，（）=>{
常数约=浅(
).潜水
expect（about.find（'h1'）.text（））.toEqual（'about'））
})
})

使用.first（）

范例 常量包装器=浅（）

find（'h1或p或.ClassName或#id'）.first（）

从“React”导入React
从“酶”导入{shall}
从“反应测试渲染器”导入渲染器
从“../pages/About.js”导入关于
描述（'用酶'，（）=>{
它（'应用程序显示“关于”，（）=>{
常数约=浅(
)
expect（about.find（'h1'）.first（）.text（））.toEqual（'about'））
})
})

请查看此链接，了解如何使用浅拷贝上的.findWhere：

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

displayemployee=shall（{
期待(
displayemployee.findWhere(
n=>n.type（）=='p'&&n.contains（'100000.00'））
)
)

---

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

您还可以将“导出类”与“导出默认值”一起“导出类”，并在t中导入组件est与解构导入版本

例如：

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)

import React，{Component}来自“React”
从“react intl”导入{FormattedRelative}
从“../components/pageWithIntl”导入pageWithIntl
从“../components/Layout”导入布局
导出类关于扩展组件{
静态异步getInitialProps（{req}）{
返回{someDate:Date.now（）}
}
渲染（）{
返回(
关于


)
}
}
导出默认页面WithIntl（关于）

以及测试：

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

/*全球it、预期、描述*/
从“React”导入React
从“酶”导入{shall}
从“反应测试渲染器”导入渲染器
从“../pages/About.js”导入{About}
描述（'用酶'，（）=>{
它（'应用程序显示“关于”，（）=>{
常数约=浅(
)
expect（about.find（'h1'）.text（））.toEqual（'about'））
})
})

我仍然收到错误消息：方法“text”只能在单个节点上运行。相反，找到了0。在shallowRapper.single（node_modules/enzyme/build/shallowRapper.js:1502:17）在shallowRapper.text（node_modules/enzyme/build/shallowRapper.js:744:21）在对象上。（\uu测试\关于.tests.js:13:29）用酶✕ 应用程序显示“About”（11ms）可能是

pageWithIntl

用另一个函数将其包装起来。帮助我找出要做什么的是在快照中渲染它以实际查看渲染的输出。你能详细说明如何在快照中渲染它吗？使用const component=renderer.create（）进行快照测试；const tree=component.toJSON（）；expect（tree）.toMatchSnapshot（）；通过，但使用上面相同的expect语句失败，并显示相同的错误消息。如下所示：

expect（shallow（）.dive（））.toMatchSnapshot（）

，然后您可以添加另一个

dive（）

，直到到达真正的组件。使用dive（）后将错误降至下面TypeError:无法对主机组件调用ShallowRapper:：dive（）

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