Question

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

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

这里的Ant是我为它写的一个测试。

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              )

正如您所看到的，我只是想测试元素的文本，但是我收到以下错误：

CoreCLR

但我只有一个id为enzymeTest的元素。因此，find方法应返回单个节点，我不明白为什么会抛出此错误。有人可以帮忙吗？

Answer 1

我跑到这里......这确实是个问题..

如果我运行此代码

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)

但是如果你将班级名改为

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的元素，但是在酶中查找方法不会返回单个节点

1 个答案: