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")
    })
})

Related Query

More Query from same tag