Can't select LocalizedRichTextField on tests by selecting their Label

[nicolasolmospurple]

I am trying to dispatch a change event by selecting the label that is assigned to the LocalizedRichInput. Jest returns an error stating that the label has not control associated. I have checked if I missed using the id attribute. Everything looks normal. Both id and for are setted.

Expected behavior

I need to be able to select that field and dispatch an event on it.

Screenshots

Additional context

    "jest": "27.3.1",
    "@testing-library/react": "12.1.2",
    "@testing-library/react-hooks": "7.0.2",
    "@testing-library/user-event": "^14.2.0",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "react-intl": "5.21.0",
    "react-router-dom": "5.3.0",
    "@commercetools-uikit/localized-rich-text-input": "^14.0.6",

[Rhotimee]

Hello @nicolasolmospurple,

I believe you may not be setting the for attribute properly. The format of the for attribute should be id.selectedLanguage

See snippet below.

      <label for="test-id.en">lorem</label>
      <LocalizedRichTextInput
        id="test-id"
        value={{
          en: "",
          de: ""
        }}
        onChange={(event) =>
          console.log("event.target.value", event.target.value)
        }
        selectedLanguage="en"
      />

Let me know if this was helpful.

[github-actions[bot]]

This issue has been marked as 'stale' due to its inactivity for the last 14 days. Please, add a new comment to keep the conversation going; otherwise, the issue will be closed in two weeks.