menu

Testing Library

Simple and complete DOM testing utilities that encourage good testing practices.

Channels
Chat
view-forward
# All channels
view-forward
# General
view-forward
# General Help
view-forward
# Angular Help
view-forward
# Cypress Help
view-forward
# DOM Help
view-forward
# React Help
view-forward
# TestCafe Help
view-forward
# Vue Help
view-forward
Team

react-testing-library watercooler

May 29, 2018 at 8:59pm
Show previous messages

December 8, 2019 at 1:04pm
Hello People, I am really struggling to get RTL to work with react-date-picker.
  • reply
  • like
i think onChange isn't getting called when fireEvent.Change is used to change the content of the input of datepicker
  • reply
  • like
Any help would be really appreciated.
  • reply
  • like

December 13, 2019 at 12:50pm
why this not work ?
it('render DateInput, change value and call fn callback', () => {
const callback = jest.fn()
const { container, getByTestId } = render(
<WrapperTheme>
<DateInput dataTestid="testId" value={date} label="Test TimeInput" onChange={callback} />
</WrapperTheme>
)
const input = getByTestId("testId")
fireEvent.change(input, { target: { value: '10/29/2019' } })
expect(callback).toBeCalled()
})
  • reply
  • like

January 15, 2020 at 5:18pm
why this not work ?
it('render DateInput, change value and call fn callback', () => {
const callback = jest.fn()
const { container, getByTestId } = render(
<WrapperTheme>
<DateInput dataTestid="testId" value={date} label="Test TimeInput" onChange={callback} />
</WrapperTheme>
)
const input = getByTestId("testId")
fireEvent.change(input, { target: { value: '10/29/2019' } })
expect(callback).toBeCalled()
})
Can you share your DateInput implementation?
  • reply
  • like

January 19, 2020 at 2:52am
Try <DateInput data-testid="testId" ... instead of dataTestid
Edited
  • reply
  • like

February 6, 2020 at 11:29am
i'm having problems testing material ui with react testing library
  • reply
  • like
i cannot access input values or see them change
  • reply
  • like
it happens when there's a reference such as with their input mask example
  • reply
  • like

February 11, 2020 at 9:06pm
Anyone has experience with typing custom render method? In particular, how to write types so that 1) the custom render method has same interface as original 2) works with custom queries.
  • reply
  • like

March 3, 2020 at 9:35pm
I've just upgraded to Jest 25.1 from 24.9 and my tests are failing. For example: expect(result).toHaveTextContent('error'); produces
Error: expect(received).toHaveTextContent()
received value must be an HTMLElement or an SVGElement.
Received has type: object
Received has value: <a class="text-danger">error - check console</a>
Edited
  • reply
  • like
Anyone else experiencing this?
  • reply
  • like
(nevermind, figured it out)
  • reply
  • like

March 6, 2020 at 8:20pm
Hello.js
const Hello = () => {
<Fragment>
<div>Hello World</div>
<button>Hello</button>
<button>Hello World</button
</Fragment>
}
Hello.test.js
test("test", () => {
const { container, getByText } = render(<Hello />)
expect(getByText("Hello")).toBeInTheDocument() // this finds all 3 elements so throw error
expect(container.querySelector("button")).toBeInTheDocument() // this finds the 2nd, 3rd elements
})
could anyone help me to select a specific tag with specific text? how to combine the last two lines from the example above?
  • reply
  • like
I can use "data-testid" but I have strong feeling that it should be possible
  • reply
  • like

March 12, 2020 at 6:21pm
Hello.js
const Hello = () => {
<Fragment>
<div>Hello World</div>
<button>Hello</button>
<button>Hello World</button
</Fragment>
}
Hello.test.js
test("test", () => {
const { container, getByText } = render(<Hello />)
expect(getByText("Hello")).toBeInTheDocument() // this finds all 3 elements so throw error
expect(container.querySelector("button")).toBeInTheDocument() // this finds the 2nd, 3rd elements
})
could anyone help me to select a specific tag with specific text? how to combine the last two lines from the example above?
you can use data-testid for example:
const Hello = () => {
<Fragment>
<div data-testid="hello-element">Hello World</div>
<button>Hello</button>
<button>Hello World</button
</Fragment>
}
Hello.test.js
test("test", () => {
const { container, getByTestId } = render(<Hello />)
expect(getByTestId("hello-element")).toBeInTheDocument()
})
  • reply
  • like