How do you check a checkbox in react-testing-library?

Question

I cant seem to find much/any docs on this really simple thing I'm trying to achieve

I have a dropdown that is display: none. when I click a checkbox it becomes display: block all I'm trying to assert is when I click the checkbox, it shows the dropdown

 expect(getByLabelText('Locale')).toHaveStyle(`
  display: none;
`)

getByLabelText('Locale').checked = true

expect(getByLabelText('Locale')).toHaveStyle(`
  display: block;
`)

the code works as expected but the test is failing on the second expect block saying: it should still be display: none

is the correct way to assert this?

when I click the checkbox it updates 2 attributes in my object to true which is how it renders in the code. when I manually pass these attributes the test still fails but it fails in the first expectation.

I feel like I need to do something like setProps

I have now tried to use renderWithRedux but it doesn't seem to be firing my action creator correctly?

is fireEvent.click(queryByTestId('LocaleCheckbox')) the best thing to try and update a checkbox?

Answer 1

To check or uncheck the checkbox using react-testing-library, you simply want to fireEvent.click the checkbox. There was a discussion about this on react-testing-library Issue #175. In particular, kentcdodds said:

this should probably be documented better, but with checkboxes you don't actually fire change events, you should fire click events instead.

But, based on the code you wrote above, what is the node with label text 'Locale'? Because if it has style display: none, how would your user click to check it? Is that a typo? You should be asserting style on your dropdown but clicking on your checkbox. Maybe I'm seeing it wrong, but it looks from your code like you're doing all your assertions and operations on the same node. That doesn't seem right.

I've written up a CodeSandbox sample which has a basic div with a style that is set to display: none or display:block based on whether a checkbox is checked or not. It uses react-hooks to maintain the state.

There is also a react-testing-library test that demonstrates asserting on the style, checking the checkbox, and then asserting the changed style.

The test code looks like this:

it('changes style of div as checkbox is checked/unchecked', () => {
  const { getByTestId } = render(<MyCheckbox />)
  const checkbox = getByTestId(CHECKBOX_ID)
  const div = getByTestId(DIV_ID)
  expect(checkbox.checked).toEqual(false)
  expect(div.style['display']).toEqual('none')
  fireEvent.click(checkbox)
  expect(checkbox.checked).toEqual(true)
  expect(div.style['display']).toEqual('block')
  fireEvent.click(checkbox)
  expect(checkbox.checked).toEqual(false)
  expect(div.style['display']).toEqual('none')
})

Hope this helps to point you in the right direction.