How to test Material-UI Checkbox is checked with react-testing-library?

Seems like the way Material UI works is it renders a different SVG when the checkbox is clicked, and not changing the attributes or anything on the actual input element. So how do I actually test that the element is checked in line with the react-testing-library philosophy?

Here's a rough example of the

// Checkbox component usage

export const CheckBoxContainer = () => 

<Checkbox

  inputProps={{ 'data-testid': `clickable-checkbox-1234` }}

  data-testid={`checkbox-1234`}

/>



// test

test('check the box', async () => {

  const { getByTestId } = render(<CheckBoxContainer />);

  await waitForElement(() => getByTestId(`checkbox-1234`));

  const checkbox = getByTestId(`checkbox-1234`);

  fireEvent.click(getByTestId(`clickable-checkbox-1234`));

  expect(checkbox).toHaveAttribute('checked');

});



// Generated HTML by Material UI

<span class="MuiButtonBase-root-54 MuiIconButton-root-48 MuiSwitchBase-root-231 MuiCheckbox-root-225 MuiCheckbox-colorSecondary-230 MuiSwitchBase-checked-232 MuiCheckbox-checked-226" data-testid="checkbox-1234">

  <span class="MuiIconButton-label-53">

    <svg class="MuiSvgIcon-root-57" focusable="false" viewBox="0 0 24 24" aria-hidden="true" role="presentation">

      <path d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"></path>

    </svg>

    <input class="MuiSwitchBase-input-234" type="checkbox" data-indeterminate="false" data-testid="clickable-checkbox-1234" value="">

  </span>

  <span class="MuiTouchRipple-root-66">

  </span>

</span>

asked Nov 12 '18 at 23:36

Dale Race

add a comment |

Here's a rough example of the

// Checkbox component usage

export const CheckBoxContainer = () => 

<Checkbox

  inputProps={{ 'data-testid': `clickable-checkbox-1234` }}

  data-testid={`checkbox-1234`}

/>



// test

test('check the box', async () => {

  const { getByTestId } = render(<CheckBoxContainer />);

  await waitForElement(() => getByTestId(`checkbox-1234`));

  const checkbox = getByTestId(`checkbox-1234`);

  fireEvent.click(getByTestId(`clickable-checkbox-1234`));

  expect(checkbox).toHaveAttribute('checked');

});



// Generated HTML by Material UI

<span class="MuiButtonBase-root-54 MuiIconButton-root-48 MuiSwitchBase-root-231 MuiCheckbox-root-225 MuiCheckbox-colorSecondary-230 MuiSwitchBase-checked-232 MuiCheckbox-checked-226" data-testid="checkbox-1234">

  <span class="MuiIconButton-label-53">

    <svg class="MuiSvgIcon-root-57" focusable="false" viewBox="0 0 24 24" aria-hidden="true" role="presentation">

      <path d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"></path>

    </svg>

    <input class="MuiSwitchBase-input-234" type="checkbox" data-indeterminate="false" data-testid="clickable-checkbox-1234" value="">

  </span>

  <span class="MuiTouchRipple-root-66">

  </span>

</span>

asked Nov 12 '18 at 23:36

Dale Race

add a comment |

Here's a rough example of the

// Checkbox component usage

export const CheckBoxContainer = () => 

<Checkbox

  inputProps={{ 'data-testid': `clickable-checkbox-1234` }}

  data-testid={`checkbox-1234`}

/>



// test

test('check the box', async () => {

  const { getByTestId } = render(<CheckBoxContainer />);

  await waitForElement(() => getByTestId(`checkbox-1234`));

  const checkbox = getByTestId(`checkbox-1234`);

  fireEvent.click(getByTestId(`clickable-checkbox-1234`));

  expect(checkbox).toHaveAttribute('checked');

});



// Generated HTML by Material UI

<span class="MuiButtonBase-root-54 MuiIconButton-root-48 MuiSwitchBase-root-231 MuiCheckbox-root-225 MuiCheckbox-colorSecondary-230 MuiSwitchBase-checked-232 MuiCheckbox-checked-226" data-testid="checkbox-1234">

  <span class="MuiIconButton-label-53">

    <svg class="MuiSvgIcon-root-57" focusable="false" viewBox="0 0 24 24" aria-hidden="true" role="presentation">

      <path d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"></path>

    </svg>

    <input class="MuiSwitchBase-input-234" type="checkbox" data-indeterminate="false" data-testid="clickable-checkbox-1234" value="">

  </span>

  <span class="MuiTouchRipple-root-66">

  </span>

</span>

asked Nov 12 '18 at 23:36

Dale Race

Here's a rough example of the

// Checkbox component usage

export const CheckBoxContainer = () => 

<Checkbox

  inputProps={{ 'data-testid': `clickable-checkbox-1234` }}

  data-testid={`checkbox-1234`}

/>



// test

test('check the box', async () => {

  const { getByTestId } = render(<CheckBoxContainer />);

  await waitForElement(() => getByTestId(`checkbox-1234`));

  const checkbox = getByTestId(`checkbox-1234`);

  fireEvent.click(getByTestId(`clickable-checkbox-1234`));

  expect(checkbox).toHaveAttribute('checked');

});



// Generated HTML by Material UI

<span class="MuiButtonBase-root-54 MuiIconButton-root-48 MuiSwitchBase-root-231 MuiCheckbox-root-225 MuiCheckbox-colorSecondary-230 MuiSwitchBase-checked-232 MuiCheckbox-checked-226" data-testid="checkbox-1234">

  <span class="MuiIconButton-label-53">

    <svg class="MuiSvgIcon-root-57" focusable="false" viewBox="0 0 24 24" aria-hidden="true" role="presentation">

      <path d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"></path>

    </svg>

    <input class="MuiSwitchBase-input-234" type="checkbox" data-indeterminate="false" data-testid="clickable-checkbox-1234" value="">

  </span>

  <span class="MuiTouchRipple-root-66">

  </span>

</span>

material-ui react-testing-library

asked Nov 12 '18 at 23:36

Dale Race

asked Nov 12 '18 at 23:36

Dale Race

asked Nov 12 '18 at 23:36

Dale Race

asked Nov 12 '18 at 23:36

Dale Race

asked Nov 12 '18 at 23:36

Dale Race

add a comment |

2 Answers
2

active

oldest

votes

Since the checkbox is rendering an input I would work with it rather than focusing on the image.

You could do something like this:

const checkbox = getByTestId('checkbox-1234').querySelector('input[type="checkbox"]')

expect(checkbox).toHaveProperty('checked', true)

answered Nov 13 '18 at 7:51

Gpx

1,58321424

The input doesn't change, and never gets a "checked" attribute, the SVG is what actually changes

– Dale Race
Nov 13 '18 at 15:41

That's strange. Can you create a reproducible example in codesandbox?

– Gpx
Nov 13 '18 at 16:29

Found an example from Dan Abramov: codepen.io/gaearon/pen/wgedvV?editors=0010

– Dale Race
Nov 13 '18 at 17:19

add a comment |

Figured it out. Need to use the checked getter on the DOM, and not try to check the checked property. Found this issue explaining it: https://github.com/facebook/react/issues/7051#issuecomment-334018747

and this Codepen demoing how the checked attribute doesn't change in React:
https://codepen.io/gaearon/pen/wgedvV?editors=0010

Like this:
expect(checkbox.checked).toBe(true)

answered Nov 13 '18 at 17:18

Dale Race

I don't understand how is this different from my version. expect(checkbox).toHaveProperty('checked', true) is syntactic sugar for expect(checkbox.checked).toBe(true)

– Gpx
Nov 14 '18 at 7:10

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53271663%2fhow-to-test-material-ui-checkbox-is-checked-with-react-testing-library%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

2 Answers
2

active

oldest

votes

2 Answers
2

active

oldest

votes

Since the checkbox is rendering an input I would work with it rather than focusing on the image.

You could do something like this:

const checkbox = getByTestId('checkbox-1234').querySelector('input[type="checkbox"]')

expect(checkbox).toHaveProperty('checked', true)

answered Nov 13 '18 at 7:51

Gpx

1,58321424

The input doesn't change, and never gets a "checked" attribute, the SVG is what actually changes

– Dale Race
Nov 13 '18 at 15:41

That's strange. Can you create a reproducible example in codesandbox?

– Gpx
Nov 13 '18 at 16:29

Found an example from Dan Abramov: codepen.io/gaearon/pen/wgedvV?editors=0010

– Dale Race
Nov 13 '18 at 17:19

add a comment |

Since the checkbox is rendering an input I would work with it rather than focusing on the image.

You could do something like this:

const checkbox = getByTestId('checkbox-1234').querySelector('input[type="checkbox"]')

expect(checkbox).toHaveProperty('checked', true)

answered Nov 13 '18 at 7:51

Gpx

1,58321424

The input doesn't change, and never gets a "checked" attribute, the SVG is what actually changes

– Dale Race
Nov 13 '18 at 15:41

That's strange. Can you create a reproducible example in codesandbox?

– Gpx
Nov 13 '18 at 16:29

Found an example from Dan Abramov: codepen.io/gaearon/pen/wgedvV?editors=0010

– Dale Race
Nov 13 '18 at 17:19

add a comment |

Since the checkbox is rendering an input I would work with it rather than focusing on the image.

You could do something like this:

const checkbox = getByTestId('checkbox-1234').querySelector('input[type="checkbox"]')

expect(checkbox).toHaveProperty('checked', true)

answered Nov 13 '18 at 7:51

Gpx

1,58321424

Since the checkbox is rendering an input I would work with it rather than focusing on the image.

You could do something like this:

const checkbox = getByTestId('checkbox-1234').querySelector('input[type="checkbox"]')

expect(checkbox).toHaveProperty('checked', true)

answered Nov 13 '18 at 7:51

Gpx

1,58321424

answered Nov 13 '18 at 7:51

Gpx

1,58321424

answered Nov 13 '18 at 7:51

Gpx

1,58321424

answered Nov 13 '18 at 7:51

Gpx

1,58321424

The input doesn't change, and never gets a "checked" attribute, the SVG is what actually changes

– Dale Race
Nov 13 '18 at 15:41

That's strange. Can you create a reproducible example in codesandbox?

– Gpx
Nov 13 '18 at 16:29

Found an example from Dan Abramov: codepen.io/gaearon/pen/wgedvV?editors=0010

– Dale Race
Nov 13 '18 at 17:19

add a comment |

The input doesn't change, and never gets a "checked" attribute, the SVG is what actually changes

– Dale Race
Nov 13 '18 at 15:41

That's strange. Can you create a reproducible example in codesandbox?

– Gpx
Nov 13 '18 at 16:29

Found an example from Dan Abramov: codepen.io/gaearon/pen/wgedvV?editors=0010

– Dale Race
Nov 13 '18 at 17:19

The input doesn't change, and never gets a "checked" attribute, the SVG is what actually changes

– Dale Race
Nov 13 '18 at 15:41

That's strange. Can you create a reproducible example in codesandbox?

– Gpx
Nov 13 '18 at 16:29

Found an example from Dan Abramov: codepen.io/gaearon/pen/wgedvV?editors=0010

– Dale Race
Nov 13 '18 at 17:19

add a comment |

and this Codepen demoing how the checked attribute doesn't change in React:
https://codepen.io/gaearon/pen/wgedvV?editors=0010

Like this:
expect(checkbox.checked).toBe(true)

answered Nov 13 '18 at 17:18

Dale Race

I don't understand how is this different from my version. expect(checkbox).toHaveProperty('checked', true) is syntactic sugar for expect(checkbox.checked).toBe(true)

– Gpx
Nov 14 '18 at 7:10

add a comment |

and this Codepen demoing how the checked attribute doesn't change in React:
https://codepen.io/gaearon/pen/wgedvV?editors=0010

Like this:
expect(checkbox.checked).toBe(true)

answered Nov 13 '18 at 17:18

Dale Race

I don't understand how is this different from my version. expect(checkbox).toHaveProperty('checked', true) is syntactic sugar for expect(checkbox.checked).toBe(true)

– Gpx
Nov 14 '18 at 7:10

add a comment |

and this Codepen demoing how the checked attribute doesn't change in React:
https://codepen.io/gaearon/pen/wgedvV?editors=0010

Like this:
expect(checkbox.checked).toBe(true)

answered Nov 13 '18 at 17:18

Dale Race

and this Codepen demoing how the checked attribute doesn't change in React:
https://codepen.io/gaearon/pen/wgedvV?editors=0010

Like this:
expect(checkbox.checked).toBe(true)

answered Nov 13 '18 at 17:18

Dale Race

answered Nov 13 '18 at 17:18

Dale Race

answered Nov 13 '18 at 17:18

Dale Race

answered Nov 13 '18 at 17:18

Dale Race

I don't understand how is this different from my version. expect(checkbox).toHaveProperty('checked', true) is syntactic sugar for expect(checkbox.checked).toBe(true)

– Gpx
Nov 14 '18 at 7:10

add a comment |

I don't understand how is this different from my version. expect(checkbox).toHaveProperty('checked', true) is syntactic sugar for expect(checkbox.checked).toBe(true)

– Gpx
Nov 14 '18 at 7:10

I don't understand how is this different from my version. expect(checkbox).toHaveProperty('checked', true) is syntactic sugar for expect(checkbox.checked).toBe(true)

– Gpx
Nov 14 '18 at 7:10

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Nrthugu