Не удалось проанализировать селектор ферментной реакции

Question

Я тестирую с Enzyme и Jest мое приложение реакции. У меня есть некоторые элементы с большим количеством пробелов в строке идентификаторов, и они должны быть в html идентификаторах, поэтому я заменяю их на '-'. Но когда я запускаю тест, у меня появляется ошибка:

Error: Failed to parse selector: tr#28000010785600108---------BA---------

Я думал, что средние штрихи были разрешены в html идентификаторах и классах.

Вот мой код:

    describe('VerticalBox', () => {
          const verticals = [
            {'id':'28000010785600108         BA         ', 'bisDuplicate':null, 'block':null, 'door':null, 'letter':null, 'stair':null, 'floor':'Bajo', 'hand1':null, 'hand2':null, 'summary':'Bajo'},
            {'id':'28000010785600108       W BA         ', 'bisDuplicate':null, 'block':null, 'door':null, 'letter':null, 'stair':'Derecha', 'floor':'Bajo', 'hand1':null, 'hand2':null, 'summary':'Derecha Bajo'}
    ]

    const defaultProps = {
        className: 'erwfw',
        verticals: verticals,
      }

    const component = (
        <VerticalBox
          {...defaultProps}
        />
      )

      const wrapper = mount(component)

    it('onSelect events', () => {
        wrapper.find('tr#' + verticals[0].id.replace(/ /g, '-')).simulate('click')
    expect(.......)
    })
})

Мой компонент возвращает:

return (
    <div className={className}>
      <table cellSpacing="0" cellPadding="0" className={'vertical-table'}>
        <thead>
          <tr>
            <th></th>
            <th>Piso</th>

          </tr>
        </thead>
        <tbody>
          {
            verticals.map((vertical) => (
              <tr key={vertical.id} id={vertical.id && vertical.id.replace(/ /g, '-')} className={vertical.id === selectedIndex ? 'selected' : ''} onClick={() => onSelectRow(`${vertical.id}.`)}>
                <td className={'radio-container'}>
                  <MaterialRadio
                    value={`${vertical.id}.`}
                    text={''}
                    onSelect={() => {}}
                    checked={ vertical.id === selectedIndex} />
                </td>
                <td>{`${vertical.floor} ${vertical.hand1 || ''}`}</td>
              </tr>
            ))
          }
        </tbody>
      </table>
    </div>
  )