Using Jest and React Testing Libray. Can't click checkbox

Viewed 346

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>
1 Answers

First of all, you don't need to wrap fireEvent in act, it is wrapped internally AFAIK. Secondly, try the same with native html checkbox input, if the test will pass, your checkbox is the source of the problem.

Try to find out why the input is type text and not checkbox as you are correctly expecting

Related