score:0
i'm using testing-library
and in my case i had:
fireevent(myelement, new mouseevent('click'));
i added {bubbles: true}
changing it to:
fireevent(myelement, new mouseevent('click', { bubbles: true }));
and it worked! it seems the event should bubble to work. the same happens with native dispatchevent
, need bubbles to work:
myelement.dispatchevent(new event("click", { bubbles: true }));
score:1
describe('state is managed correctly', () => {
const { getbytestid } = render(<app />)
const add = getbytestid(`addcount`)
const count = getbytestid(`count`)
const spy = jest.spyon(add, 'click');
it('count starts at 0', () => {
expect(count).tohavetextcontent("0")
})
it('count added, value should be 1', () => {
add.click();
expect(count).tohavetextcontent("1") // error count is still 0
spy.mockrestore();
})
})
score:3
every time you need to verify something to need to re-run the query. const count = getbytestid('count')
sets count
to the initial value, so you need to tell it to look up the count again after firing the event.
it('count added, value should be 1', () => {
fireevent.click(add)
count = getbytestid('count')
expect(count).tohavetextcontent("1") // error count is still 0
})
score:4
looks like you can't really "manage" state in react-testing-library like i was hoping. also seems like from reading the docs are you aren't supposed to either.
here is my solution:
import react from 'react'
import { render, fireevent, cleanup } from '@testing-library/react'
import app from '../src/app'
aftereach(cleanup)
describe('app component loads correctly', () => {
const { container } = render(<app />)
const { firstchild } = container
test('renders correctly', () => {
expect(container).tohavetextcontent(`learn react`)
})
test('first child should contain class "app"', () => {
expect(firstchild).tohaveclass(`app`)
})
})
describe('state is managed correctly', () => {
it('count starts at 0', () => {
const { getbytestid } = render(<app />)
const count = getbytestid(`count`)
expect(count.innerhtml).tobe("0")
})
it('should add 1 to count', () => {
const { getbytestid } = render(<app />)
const count = getbytestid(`count`)
const add = getbytestid(`addcount`)
fireevent.click(add)
expect(count.innerhtml).tobe("1")
})
it('should minus 1 from count', () => {
const { getbytestid } = render(<app />)
const count = getbytestid(`count`)
const minus = getbytestid(`minuscount`)
fireevent.click(minus)
expect(count.innerhtml).tobe("-1")
})
})
Source: stackoverflow.com
Related Query
- fireEvent.keyDown not working as expected on my Jest + React Testing Library test
- React testing library fireEvent.click not working
- testing a react form with pure Jest library (no enzyme) not working
- Not able to click list child element from side menu using react testing library
- Cleanup method is not working in react testing library
- React Context API not working from custom NPM component library
- React Testing Library - using 'await wait()' after fireEvent
- Testing click event in React Testing Library
- React testing library - TypeError: expect(...).toHaveTextContent is not a function
- Property 'value' does not exist on type 'HTMLElement' in React Testing Library
- Marker click event on react native maps not working in react ios
- React Testing Library's waitFor not working
- React Testing Library does not find elements using getAllByTestId after initial render
- React testing library not rendering Emotion CSS
- React Testing Library Invariant failed: You should not use <Route> outside a <Router>
- getByRole query for paragraph not working during React testing
- React Routers not working on button click
- Dispatch is not a function - React Testing Library with React Redux Hooks
- React testing library differences between clicks using userEvent, fireEvent and regular clicks
- React Testing Library - TypeError: actImplementation is not a function
- "TypeError: react.useContext is not a function" when mocking context Providers with React Testing Library
- React Testing Library clears hash after click on <a> tag
- React Testing Library - fireEvent doesn't change input value
- React Event Handler Button Click Not Working on First Click
- Is there any solution to mock react-query's useQuery and useMutation while working with react testing library
- Jest/Enzyme shallow testing React stateless component - wrapper.find() not working
- Attempts to check for element not existing with React Testing Library always failing
- Expect is not a function in react testing library
- Redirect in React Router not working when I click from Users to Post
- React hooks not working when imported from local library
More Query from same tag
- Make expandable table rows accessible
- How to allow only double numbers in input React js
- Solved : ReactJS : Uncaught TypeError: Cannot read property 'id' of undefined when posting to a Laravel Controller using axios
- React change selected item index of array using order number
- How to prevent withRouter causing rerendering PureComponent?
- useEffect array dependency is called in every render when array is not changed
- How to add multiple components into one story using Storybook?
- How to refresh a react redux application when data changes on DB outside of the application
- React form wrong radio values
- Find the same elements of an array from other arrays?
- Will react setState immedietly set the state?
- How to update a state variable correctly using onClick in functional component
- Dynamically create React.Dispatch instances in FunctionComponents
- Default value for intrinsic attributes
- react-google-maps map refreshes after onclick
- Getting last value of slider
- How to use react-router 4.0 to refresh current route? not reload the whole page
- Possible to run commands after npm start on the same console?
- Text won`t render using path in react rendered SVG. How can I use this textPath correctly?
- How can I translate dynamic sentence with react i18next?
- BrowserslistError: Unknown browser query `dead` in React/Express App
- Enzyme/Mocha: How to test a react component function by firing an onChange event from a child component
- how to stop re-render in reactjs?
- React: Props passed on to child class not working
- How to map a JSON to create an array in ReactJS?
- next.js image is missing src property
- Property 'background' does not exist on type 'unknown'. ReactJS/useHistory()
- Trouble setting radiobuttons with React
- React Class definition vs export default
- Target a nested div coming from an external component