React Testing Library Helpers

showInfoTip.js

// A helper for RTL
export const expandSelect = selectInput => {
  if (_.toLower(selectInput.tagName) !== 'input') {
    selectInput = selectInput.querySelector('input')
  }
  fireEvent.mouseDown(selectInput)
  fireEvent.focus(selectInput)
}

export const showInfoTip = async infoTip => {
  const infoTipTrigger = infoTip.querySelector('div')
  fireEvent.mouseEnter(infoTipTrigger)
  let toolTip
  await waitFor(() => {
    const toolTipId = infoTipTrigger.getAttribute('aria-describedby')
    toolTip = global.document.querySelector(`#${toolTipId}`)
    // eslint-disable-next-line no-undef
    expect(toolTip).to.be.ok
  })
  return toolTip
}

// Usage in the test file
 const infoTip = await showInfoTip(find('.name-tooltip'))
 expect(infoTip.textContent).to.include('Hello There')

tableToJSON.js

export const editTableJSON = table => {
  const result = []

  _.map(table.rows, row => {
    const rowData = {}
    _.map(row.cells, cell => {
      const className = cell.classList[0]
      // Assuming that the cell has the classname ending with '-value' 
      // <tr><td class="name-value">Name</td><tr>
      if (_.endsWith(className, '-value')) {
        // Convert className to camelCase so that first-name-value becomes -> firstName
        const columnName = _.camelCase(_.replace(className, '-value', ''))
          rowData[columnName] = cell.textContent
      }
    })
    result.push(rowData)
  })

  return _.drop(result)
}

withReactSelect.js

export const editTableJSON = table => {
  const result = []

  _.map(table.rows, row => {
    const rowData = {}
    _.map(row.cells, cell => {
      const className = cell.classList[0]
      // Assuming that the cell has the classname ending with '-value' 
      // <tr><td class="name-value">Name</td><tr>
      if (_.endsWith(className, '-value')) {
        // Convert className to camelCase so that first-name-value becomes -> firstName
        const columnName = _.camelCase(_.replace(className, '-value', ''))
        const select = cell.querySelector('.select-input')

        if (select) {
          const selectedText = select.querySelector('.single-value') // SingleValue Component of react-select
            .textContent
          rowData[columnName] = selectedText
        } else {
          rowData[columnName] = cell.textContent
        }
      }
    })
    result.push(rowData)
  })

  return _.drop(result)
}

This was useful when firing an event for table rows with React-Testing-Library