Menu
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?
428
forEach(node => { expect(node . props . checked) . toEqual(true); });
To get the value of checkbox using a ref in React, we can use the checked property of the checkbox. We create the checkboxRef with the useRef hook. Then we assign the ref prop to checkboxRef to assign the checkbox as the value of checkboxRef. current .
Aside from finding whether elements are present in your document body, React Testing Library also helps you test user generated events, like clicking on a button and typing values into a textbox. The user-event library is companion library for simulating user-browser interaction.
Checkbox Application component is a container component - it encapsulates our entire React.js application, and renders three instances of Checkbox component and a Save button. Application component also logs into the Developer Tools Console which checkboxes were checked when users click the Save button.
Most of your React test cases should use methods for finding elements. React Testing Library provides you with several methods to find an element by specific attributes in addition to the getByText () method above: getByText (): find the element by its textContent value getByRole (): by its role attribute value
A React application created with Create React App (or CRA) already includes both React Testing Library and Jest by default. So all you need to do is write your test code. If you want to use React Testing Library outside of a CRA application, then you need to install both React Testing Library and Jest manually with NPM:
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.
167
I'm using "react-test-renderer": "^17.0.2". I've manage to do the same with a simple:
getByTestId("data-testid").click() this is the code to get the getByTestId:
const {getByTestId} = render(<Checkbox onClose={jest.fn()} onSave={onSave} />) If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
