首页 > 解决方案 > 反应测试 getByText 不适用于 p 元素

问题描述

这是我的测试:

describe('Address Section', () => {

const address:Address = {
    addressLine1: '23 Max Lane',
    addressLine2: '#2',
    city:'Hoboken',
    state:'NJ',
    zipcode:'07086'
}

const {getByText, container} = render(<AddressSection 
{...address}/>);

  ---------> THIS TEST WORKS
 it('finds address label', () => {
    const addressDiv = getByText('Address');
    expect(addressDiv.className).toBe('address-label');
 })
   ---------> THIS TEST DOES NOT  WORK 
it('finds addressline 1', () => {
   const pNode = getByText('23 Max Lane');
   expect(pNode).toBeDefined();
})

这是我的组件:

  function AddressSection(props:Address) {
   return (
     <div>
        <div className="address-label">Address</div>
        <div className="address-value">
          <p>{props.addressLine1}</p>
          <p>{props.addressLine2}</p>
          <p>{props.city + ' ' + props.state + ' ' + 
               props.zipcode}</p>
        </div>
      </div>
    );
}

我得到这个错误。找不到带有以下文字的元素:23 Max Lane。这可能是因为文本被多个元素分解。在这种情况下,您可以为您的文本匹配器提供一个功能,以使您的匹配器更加灵活。

标签: reactjsreact-testing-library

解决方案


推荐阅读