Jest.js 酶：方法“text”只能在单个节点上运行,找到0

o4hqfura 于 2022-12-31 发布在 Jest

关注(0)|答案(5)|浏览(124)

我正在使用React v15.4、Babel-jest v18和酶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)

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

/* 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测试应该通过，但我收到一个错误：
方法"text"只能在单个节点上运行。但找到0。
我错过了什么？
===更新
快照测试通过：

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

有没有一种方法可以将酶期望测试整合到快照测试中？如何整合？

jestjs

来源：https://stackoverflow.com/questions/43073338/enzyme-method-text-is-only-meant-to-be-run-on-a-single-node-0-found-instead

5条答案

按热度按时间

bhmjp9jg1#

这是因为shallow不呈现子组件，而您的组件已被函数 Package ，因此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')
  })
})

赞(0）回复(0）举报 2022-12-31

lvjbypge2#

使用.first（）

示例常量 Package 器= shallow（）
wrapper.find（“h1或p或.类名或#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')
 })
})

赞(0）回复(0）举报 2022-12-31

guz6ccqo3#

有关如何在浅副本上使用.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组件返回的所有节点，我使用.findWhere而不是. text搜索这些节点，这是因为.text期望搜索 * 单个 * 节点;.text不知道如何扫描 * 许多 * 节点。

赞(0）回复(0）举报 2022-12-31

knpiaxh14#

你也可以在"导出默认值"的同时"导出类"，并在测试中用解构导入版本导入组件。
例如：

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）回复(0）举报 2022-12-31

daolsyd05#

钻取到子组件
使用mount代替shallow

赞(0）回复(0）举报 2022-12-31