Using React Testing Library's toHaveValue() fails

[stubar]

Hi I'm doing what I would have thought would be a common test assertion...

expect(screen.getByLabelText('State')).toHaveValue('AL');

this toHaveValue() method never finds the value because the valueComponent doesn't have the id that my label is linked to.
What is the supported way of selecting the value by Label?

I have seen the components api and am considering passing a custom valueComponent to fix this but just wanted to check I've not missed anything first.

[Kecbm]

Good night @stubar, how are the structure of component that you want test the value with the toHaveValue? I ask to understand the problem and help you to give new options to test it 😁

[stubar]

hi thanks for the reply, the jsx looks like this at the moment...

			<Text.Label16
				as="label"
				htmlFor={name}
				mb="xs"
				display="inline-block"
				data-testid="combobox-label"
			>
				{label}
			</Text.Label16>
			<Select
				isMulti={false}
				options={inputOptions}
				placeholder={placeholder ?? 'Select'}
				menuPortalTarget={document.body}
				styles={styles}
				theme={theme}
				inputId={name}
				{...field}
				components={{
					Option: OptionComponent,
					// disable separator bar
					IndicatorSeparator: () => null,
				}}
				onKeyDown={(event) => {
					// when used in a modal, prevents 'esc' key from exiting modal
					if (event.key === 'Escape') {
						event.stopPropagation();
					}
				}}
				onChange={(opt) => {
					helpers.setValue((opt as ComboboxOption)?.value);
				}}
				onBlur={() => {
					helpers.setTouched(true);
				}}
				value={options?.find((v) => v.value === field.value)}
				{...selectProps}
			/>
			{meta.error && meta.touched && (
				<Text.Label12 color="textNegativePrimary" mt="xs" data-testid="combobox-error">
					{meta.error}
				</Text.Label12>
			)}
		</Box>```