酶:方法“文本”仅用于在单个节点上运行。找到了 0 个
Posted
技术标签:
【中文标题】酶:方法“文本”仅用于在单个节点上运行。找到了 0 个【英文标题】:Enzyme: Method “text” is only meant to be run on a single node. 0 found instead 【发布时间】:2017-08-21 18:00:32 【问题描述】:我正在使用 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()
)
)
有没有办法将酶期望测试集成到快照测试中?怎么做?
【问题讨论】:
【参考方案1】:您还可以“导出类”和“导出默认值”并使用解构导入版本导入测试中的组件。
例如:
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')
)
)
【讨论】:
【参考方案2】:请参阅此链接,了解如何在浅拷贝上使用 .findWhere: 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 期望通过 single 节点进行查看; .text 不知道如何扫描 许多 节点。
【讨论】:
【参考方案3】:使用 .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')
)
)
【讨论】:
【参考方案4】:这是由于浅层不渲染子组件并且您的组件被函数包装的事实引起的。所以 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')
)
)
【讨论】:
我仍然收到错误消息:方法“text”仅用于在单个节点上运行。找到了 0 个。在 ShallowWrapper.single (node_modules/enzyme/build/ShallowWrapper.js:1502:17) 在 ShallowWrapper.text (node_modules/enzyme/build/ShallowWrapper.js:744:21) 在 Object. (__tests__/about.test .js:13:29) 使用 Enzyme ✕ 应用程序显示“关于”(11 毫秒) 会不会是pageWithIntl
用另一个函数包裹了它。帮助我弄清楚发生了什么是在快照中渲染它以实际查看渲染输出。
您能否详细说明如何在快照中呈现它? const component = renderer.create(); 的快照测试常量树 = component.toJSON();期望(树).toMatchSnapshot();通过但与上面相同的期望语句失败并显示相同的错误消息。
就像这样:expect(shallow(<About />).dive()).toMatchSnapshot()
然后你可以添加另一个dive()
直到你到达你真正的组件。
使用dive() 后出现以下错误 TypeError: ShallowWrapper::dive() can not be called on Host Components以上是关于酶:方法“文本”仅用于在单个节点上运行。找到了 0 个的主要内容,如果未能解决你的问题,请参考以下文章