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

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

I have installed the following command 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)  

相同的代码曾经以相同的配置执行过..但是现在不执行了吗? 有人可以帮我解决这个问题吗?

评论
  • 行文华
    行文华 回复

    您正在尝试在组件内部的div中找到一个div,该div中只有一个div元素。当酶谈论节点时,它是在谈论元素,因此基本上是在告诉您,find函数找不到与您作为参数传递的参数相匹配的元素。我认为问题在于,默认情况下,第二个div元素是隐藏的。在尝试查找元素之前,应尝试将状态prop isShown设置为true。

  • 假装听不见
    假装听不见 回复

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

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