如何使用玩笑测试反应组件的标题？

Question

我有一个简单的组件，其中包括两个按钮和标题字段。到目前为止，我测试了按钮点击，但我想测试 <h3> 标签中的标题文本字段。

我的组件

class Popup extends React.Component {
    render() {
        return (
            <div className="popupOuter">
                <div className="popupInner text-center">
                    <br/>
                    <h3>{this.props.config.text}</h3>
                    <br/>
                    <div>
                    <Button type='NoButton' value={'No'} onClick={this.props.config.back} />
                    <Button type = 'YesButton' value={'Yes'} onClick={this.props.config.next}/>
                    </div>
                </div>
            </div>
        );
    }
}

我的测试

 test('Text test ', ()=>{
        const component = shallow(
            <Popup config={config}/>
        );
        expect(component.find('h3')).toEqual("h3");
    });

我的测试失败

错误：expect(received).toEqual(expected) // 深度相等预期："h3" 收到：{}

出了什么问题？请解释？

谢谢。

Answer 1

.find(selector) => ShallowWrapper returns shallow wrapper, obviously, the shallow wrapper is not equal to the string h3. If you want to get the text of this h3 shallow wrapper, you need to call .text() => String 在浅包装纸上。

例如

index.tsx:

import React from 'react';
const Button = (props) => <button></button>;
export class Popup extends React.Component {
  render() {
    return (
      <div className="popupOuter">
        <div className="popupInner text-center">
          <br />
          <h3>{this.props.config.text}</h3>
          <br />
          <div>
            <Button type="NoButton" value={'No'} onClick={this.props.config.back} />
            <Button type="YesButton" value={'Yes'} onClick={this.props.config.next} />
          </div>
        </div>
      </div>
    );
  }
}

index.test.tsx:

import { Popup } from './';
import { shallow } from 'enzyme';

describe('60759790', () => {
  it('should render text for h3', () => {
    const mProps = { config: { text: 'h3' } };
    const wrapper = shallow(<Popup {...mProps}></Popup>);
    expect(wrapper.find('h3').text()).toEqual('h3');
  });
});

单元测试结果：

 PASS  Whosebug/60759790/index.test.jsx (8.126s)
  60759790
    ✓ should render text for h3 (10ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        9.418s

如何使用玩笑测试反应组件的标题？

How to test heading of a react component using jest?

reactjs

unit-testing

jestjs

enzyme

web-component-tester