I am importing a new checkbox component. Everything is pretty simple and straightforward, except clicking it in testing. We keep the onchange logic in a parent component, with the child/"checklist" component housing a label and array of checkboxes. The imported component is about as simple as can be (just an <input type="checkbox" /> with a couple more attributes. Everything works as expected when we run it, but I can't
act(() => {
fireEvent.click(onAnything);
}
in the component. So to get a closer look at what jest/rtd are seeing, I broke it, and am including the printout of the test's interpretation of the component. I've got a "mock-check-box" and an input. Both the box's and input's checked/value attributes behave as expected with mock data passed in, but I can't treat either as an actual element - by which I mean I can't getByText(/Option number one/i) and get any results, and clicking also doesn't work. Also, and cleary I'm still new to front end testing, but the text exists as attributes, not as "text" like the label does. Additionally, the input type is text where I would have expected checkbox. So not sure if this is an issue. So at this point I'm basically able to confirm data coming into the page, but I'm unable to manipulate it. Any help would be appreciated!
Parent Component:
<div
className="checklist-container"
data-testid="checklist-container"
>
<CheckList
label={label}
listItems={listItems}
onChangeHandler={handleChange}
checkedItems={checkedItems}
labelId={labelId}
/>
</div>
Child/Checklist Component:
const CheckList = ({
listItems,
checkedItems,
onChangeHandler,
labelId,
label,
}) => {
return (
<>
<label
data-testid="checklist-label"
htmlFor={labelId}
className="checkList-label"
>
{label}
</label>
{listItems.map(item => (
<CheckBox
key={item}
label={item}
name={item}
checked={checkedItems.indexOf(item) > -1}
onChange={onChangeHandler}
/>
))}
</>
);
};
Test's Interpretation:
<div
class="checklist-container"
data-testid="checklist-container">
>
<label class="checkList-label" data-testid="checklist-label" for="theChex">
Pick One
</label>
<mock-check-box
checked="false"
data-testid="MockCheckBox"
label="Option number one"
name="Option number one"
/>
<input
data-testid="MockCheckBoxOnChange"
type="text"
value="false" />
<mock-check-box
checked="false"
data-testid="MockCheckBox"
label="Option number two"
name="Option number two" />
<input
data-testid="MockCheckBoxOnChange"
type="text"
value="false" />
</div>