25

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?

Red Baron
  • 4,499
  • 4
  • 18
  • 53

2 Answers2

35

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.

Edit checkbox alters style

Alvin S. Lee
  • 3,900
  • 26
  • 33
  • sorry, let me explain better. I have a checkbox that is always is visible, checking and unchecking it, causes the dropdown next to it to be shown or hidden. i.e. checked == display block, unchekced == display: none. when I click the checkbox it fires an action to the redux store which changes the parameter to be either false or true. the component code then uses the redux state to display or not display that component, .does that make sense? I'm trying to test that when I click the checkbox the dropdown is either displayed or not – Red Baron Mar 15 '19 at 08:50
  • and it does not look like my action is being fired in the test code? – Red Baron Mar 15 '19 at 08:52
  • When you do `getByLabelText('Locale')`, are you talking about the dropdown or the checkbox? Because your test code is referencing it both for the style assertions and for checking/unchecking. That doesn't seem right. Any chance you have a CodeSandbox or other place where your code can be reviewed more fully? – Alvin S. Lee Mar 15 '19 at 09:37
0

@Red Baron If you're talking about react-native-community-checkbox. I opened a feature request (112) to add onPress() event to Checkbox component.

DragoRaptor
  • 676
  • 5
  • 9