尽管我搜索具有唯一 ID 的元素，但酶中的 find 方法不是 return 单个节点

Question

我是 reactjs 的新手，只是想为一个简单的组件编写单元测试。为此，我正在使用酶和 expectjs。这是我的组件：

import  React from "react";

export class Panel extends  React.Component{
render() {
    return (
    <div>
        <div className="row panel">
            <div  className="col-sm-12 header">{this.props.children}-------Hi {this.props.uName}</div>
            <div className="col-sm-12 body"><img className="img-responsive" src={this.props.imgUrl} alt = "" /></div>
            <div id="enzymeTest" className="col-sm-12 footer">{this.props.children}</div>
        </div>
    </div>
    );
}
}

Ant这里是我为它写的测试

import React from 'react';
import expect from 'expect.js';
 import { shallow } from 'enzyme';
 import {T as p} from "../../src/app/components/T";
 import ToDoItem from "../../src/app/components/ToDoItem";

 describe('<P />', () => {
    it('renders without exploding', () => {

    const item = mockItem();
    const wrapper = shallow(<p attach={ true } />);
    expect(wrapper.length).to.equal(1);
    expect(wrapper.find('#enzymeTest').text()).to.equal('Hello');
   });
});

如您所见，我只是想测试元素的文本，但出现以下错误：

1 failing

 1) <P /> renders without exploding:
 Error: Method âtextâ is only meant to be run on a single node. 0 found inst           ead.
    at ShallowWrapper.single     (node_modules\enzyme\build\ShallowWrapper.js:1436:17)
at ShallowWrapper.text    (node_modules\enzyme\build\ShallowWrapper.js:715:21)
  at Context.<anonymous> (C:/tj/reactjs-basics/test/components/test.js:17:44              )

但我只有一个 id 为 enzymeTest 的元素。所以 find 方法应该返回一个节点，我不明白为什么会抛出这个错误。谁能帮忙？

Answer 1

我运行这里...果然是p的问题..

如果我运行这个代码

import React from 'react';
import expect from 'expect.js';
 import { shallow, mount } from 'enzyme';


class p extends  React.Component{
render() {
    return (
    <div>
        <div className="row panel">
            <div  className="col-sm-12 header">{this.props.children}-------Hi {this.props.uName}</div>
            <div className="col-sm-12 body"><img className="img-responsive" src={this.props.imgUrl} alt = "" /></div>
            <div id="enzymeTest" className="col-sm-12 footer">{this.props.children}</div>
        </div>
    </div>
    );
}
}

 describe('<P />', () => {
    it('renders without exploding', () => {

    const wrapper = shallow(<p attach={ true } >akjsbdjabsdkj</p>);
    expect(wrapper.length).to.equal(1);
    console.log(wrapper);
    expect(wrapper.find('#enzymeTest').text()).to.equal('Hello');
   });
});

它给出

● <P /> › renders without exploding

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

      at ShallowWrapper.single (node_modules/enzyme/build/ShallowWrapper.js:1436:17)
      at ShallowWrapper.text (node_modules/enzyme/build/ShallowWrapper.js:715:21)
      at Object.<anonymous> (__tests__/test.js:26:85)
      at process._tickCallback (internal/process/next_tick.js:103:7)

但是如果您将 class 名称更改为

import React from 'react';
import expect from 'expect.js';
 import { shallow, mount } from 'enzyme';


class Panel extends  React.Component{
render() {
    return (
    <div>
        <div className="row panel">
            <div  className="col-sm-12 header">{this.props.children}-------Hi {this.props.uName}</div>
            <div className="col-sm-12 body"><img className="img-responsive" src={this.props.imgUrl} alt = "" /></div>
            <div id="enzymeTest" className="col-sm-12 footer">{this.props.children}</div>
        </div>
    </div>
    );
}
}

 describe('<P />', () => {
    it('renders without exploding', () => {

    const wrapper = shallow(<Panel attach={ true } >akjsbdjabsdkj</Panel>);
    expect(wrapper.length).to.equal(1);
    console.log(wrapper);
    expect(wrapper.find('#enzymeTest').text()).to.equal('Hello');
   });
});

有效...

 FAIL  __tests__/test.js
  ● <P /> › renders without exploding

    expected 'akjsbdjabsdkj' to equal 'Hello'

      at Assertion.Object.<anonymous>.Assertion.assert (node_modules/expect.js/index.js:96:13)
      at Assertion.Object.<anonymous>.Assertion.be.Assertion.equal (node_modules/expect.js/index.js:216:10)
      at Object.<anonymous> (__tests__/test.js:25:96)
      at process._tickCallback (internal/process/next_tick.js:103:7)

尽管我搜索具有唯一 ID 的元素，但酶中的 find 方法不是 return 单个节点

find method in enzyme does not return a single node though I search for an element with unique id

reactjs

enzyme