React 中的 UnitTests - 方法“文本”旨在在 1 个节点上运行。找到了 0 个答案

【问题标题】：UnitTests in React - Method “text” is meant to be run on 1 node. 0 found insteadReact 中的 UnitTests - 方法“文本”旨在在 1 个节点上运行。找到了 0 个
【发布时间】：2020-05-11 15:00:27
【问题描述】：

App.js：

function App() {
  return (
    <div className="App">
       <MyComponent />
    </div>
  );
}

export default App;

MyComponent.js：

import React, { Component } from 'react'

class MyComponent extends Component {
constructor(props) {
    super(props)

    this.state = {
         isShown : false
    }
}

  clickHandler = () => {
      this.setState(({isShown}) => ({ isShown : !isShown  }));
    }


    render() {
        const {isShown} = this.state
        return (
            <div>
                <button onClick= {this.clickHandler}>Click Me</button>
                {isShown && <div>Text goes here</div> }
            </div>
        )
    }
}

export default MyComponent

MyComponent.test.js：

import React from 'react'
import Enzyme, {shallow} from 'enzyme'
import Adapter from 'enzyme-adapter-react-16'
import MyComponent from './MyComponent';

Enzyme.configure({adapter : new Adapter() });

describe('MyComponent', () => {
    it('should show text', () => {
        const wrapper = shallow(<MyComponent />);
        const text = wrapper.find('div div');
        expect(text.text()).toBe('Text goes here');
    });
});

我已经安装了以下命令 npm install --save-dev enzyme enzyme-adapter-react-16

我不知道为什么会出现以下错误：
MyComponent › 应该显示文本

Method “text” is meant to be run on 1 node. 0 found instead.

  11 |         const wrapper = shallow(<MyComponent />);
  12 |         const text = wrapper.find('div div');
> 13 |         expect(text.text()).toBe('Text goes here');
     |                     ^
  14 |     });
  15 | });

  at ShallowWrapper.single (node_modules/enzyme/src/ShallowWrapper.js:1652:13)
  at ShallowWrapper.text (node_modules/enzyme/src/ShallowWrapper.js:1093:17)
  at Object.<anonymous> (src/MyComponent.test.js:13:21)

曾经使用相同的配置执行相同的代码..但现在它没有执行？有人可以帮我解决这个问题吗？

【问题讨论】：

标签： c# reactjs asp.net-mvc .net-core react-redux

【解决方案1】：

默认情况下，MyComponent 属性中的 isShown 设置为 false，因此当您尝试查找第二个 div 时，它是未定义的。首先必须点击按钮才能查看文字。

wrapper.find('a').simulate('click');

【讨论】：

感谢您的快速回复。您的回答解决了我的问题

【解决方案2】：

您试图在组件内的 div 中找到一个 div，该组件只有一个 div 元素。当酶谈论节点时，它谈论元素，所以基本上是告诉你 find 函数没有找到任何与你作为参数传递的参数匹配的元素。我认为问题在于，默认情况下，第二个 div 元素是隐藏的。在尝试查找元素之前，您应该尝试将 state 属性 isShown 设置为 true。

【讨论】：

感谢您的快速回复。您的回答解决了我的问题

【解决方案3】：

您的 jsx 组件中没有 2 个部门在浅层渲染中，您的状态是错误的，并且您的第二个 div 没有渲染

 this.state = {
     isShown : false
}

你的测试无法显示

{isShown && <div>Text goes here</div> }

通过将默认状态设置为 true 来修复它，就像那样

 this.state = {
 isShown : **true**
}

或以其他方式将您的测试代码更改为

describe('MyComponent', () => {
    it('should show text', () => {
        const wrapper = shallow(<MyComponent />);
        wrapper.setState({ isShown : true });
        const text = wrapper.find('div div');
        expect(text.text()).toBe('Text goes here');
    });
});

【讨论】：