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

May 15, 2019 at 9:14am
I don't understand the downside to using data-testid? Is it a good thing that if you change the text from Click Me to Click Here that your test breaks? Whereas if you did that using a test id then it wouldn't
For me is more about changing the text from Click Me to mistakenly having no text. A data-testid test would still run with no problem. More in general not using data-testid forces me to interact with the interface as a user would.
like-fill
1
  • reply
  • like
I have issues testing redux connected component register.test.js ```import React from 'react'; import { BrowserRouter } from 'react-router-dom'; import { createStore } from 'redux' import { Provider } from 'react-redux'; import { render, cleanup } from 'react-testing-library'; import { Register } from '../Register'; import { ConnectedRegister } from '../Register'; import authReducer from '../../state/auth/reducer'
afterEach(cleanup);
const renderWithRouter = (component,{ initialState, store = createStore(reducer, initialState) } = {} ) => { return { ...render(<Provider store={store}>{component}</Provider>), store } }
test('<Register /> component', () => { const props = { auth: { registering: true, }, alert: { error: false, }, }; const { getByText } = render( <BrowserRouter> <Register {...props} /> </BrowserRouter>, ); expect(getByText('Sign Up').tagName).toBe('BUTTON'); expect(getByText('Sign In').tagName).toBe('BUTTON'); });
test('renders the Form', () => { const props = { auth: { registering: true, }, alert: { error: false, }, }; const { getByPlaceholderText } = render( <BrowserRouter> <Register {...props} /> </BrowserRouter>, ); expect(getByPlaceholderText('Full Name')).toBeTruthy(); expect(getByPlaceholderText('Username')).toBeTruthy(); expect(getByPlaceholderText('Email Address')).toBeTruthy(); expect(getByPlaceholderText('Password')).toBeTruthy(); expect(getByPlaceholderText('Confirm Password')).toBeTruthy(); });
test('renders the Header', () => { const props = { auth: { registering: true, }, alert: { error: false, }, }; const registrationPage = render( <BrowserRouter> <Register {...props} /> </BrowserRouter>, ); const Header = registrationPage.getByText('Create Your Account'); expect(Header.textContent).toBe('Create Your Account'); });
test('renders the Component', () => { const props = { auth: { registering: true, }, alert: { error: false, }, }; const registrationPage = render( <BrowserRouter> <Register {...props} /> </BrowserRouter>, ); expect(registrationPage.getAllByPlaceholderText('Full Name')).toMatchSnapshot(); expect(registrationPage.getByText('Sign Up').tagName).toMatchSnapshot(); }); const initialState = { auth: { registering: true, }, alert: { error: false, }, };
const store = createStore(authReducer,initialState) test('can render with redux with default', () => { const {getByTestId, getByText, debug } = renderWithRouter(<ConnectedRegister />,{ initialState, store}) expect(debug()).toBeTruthy(); }) ```
Edited
  • reply
  • like
I have issues testing redux connected component register.test.js ```import React from 'react'; import { BrowserRouter } from 'react-router-dom'; import { createStore } from 'redux' import { Provider } from 'react-redux'; import { render, cleanup } from 'react-testing-library'; import { Register } from '../Register'; import { ConnectedRegister } from '../Register'; import authReducer from '../../state/auth/reducer'
afterEach(cleanup);
const renderWithRouter = (component,{ initialState, store = createStore(reducer, initialState) } = {} ) => { return { ...render(<Provider store={store}>{component}</Provider>), store } }
test('<Register /> component', () => { const props = { auth: { registering: true, }, alert: { error: false, }, }; const { getByText } = render( <BrowserRouter> <Register {...props} /> </BrowserRouter>, ); expect(getByText('Sign Up').tagName).toBe('BUTTON'); expect(getByText('Sign In').tagName).toBe('BUTTON'); });
test('renders the Form', () => { const props = { auth: { registering: true, }, alert: { error: false, }, }; const { getByPlaceholderText } = render( <BrowserRouter> <Register {...props} /> </BrowserRouter>, ); expect(getByPlaceholderText('Full Name')).toBeTruthy(); expect(getByPlaceholderText('Username')).toBeTruthy(); expect(getByPlaceholderText('Email Address')).toBeTruthy(); expect(getByPlaceholderText('Password')).toBeTruthy(); expect(getByPlaceholderText('Confirm Password')).toBeTruthy(); });
test('renders the Header', () => { const props = { auth: { registering: true, }, alert: { error: false, }, }; const registrationPage = render( <BrowserRouter> <Register {...props} /> </BrowserRouter>, ); const Header = registrationPage.getByText('Create Your Account'); expect(Header.textContent).toBe('Create Your Account'); });
test('renders the Component', () => { const props = { auth: { registering: true, }, alert: { error: false, }, }; const registrationPage = render( <BrowserRouter> <Register {...props} /> </BrowserRouter>, ); expect(registrationPage.getAllByPlaceholderText('Full Name')).toMatchSnapshot(); expect(registrationPage.getByText('Sign Up').tagName).toMatchSnapshot(); }); const initialState = { auth: { registering: true, }, alert: { error: false, }, };
const store = createStore(authReducer,initialState) test('can render with redux with default', () => { const {getByTestId, getByText, debug } = renderWithRouter(<ConnectedRegister />,{ initialState, store}) expect(debug()).toBeTruthy(); }) ```
Please open a new post and add all the details you think can help people figure it out. The best would be a reproducible example
  • reply
  • like

May 15, 2019 at 6:41pm
For me is more about changing the text from Click Me to mistakenly having no text. A data-testid test would still run with no problem. More in general not using data-testid forces me to interact with the interface as a user would.
Ah ok, good point. Thanks!
Edited
like-fill
1
  • reply
  • like

June 28, 2019 at 4:04pm
anyone want to help me figure out why i can't get (material-ui) select options to appear after firing a click event on the input?
like-fill
1
  • reply
  • like

July 25, 2019 at 3:46pm
Noob question alert! Does react-testing-library only work with react-dom, or could we mount components in real browser DOMs, say like on Sauce Labs, and run tests on the components there?
  • reply
  • like

July 26, 2019 at 1:01pm
Noob question alert! Does react-testing-library only work with react-dom, or could we mount components in real browser DOMs, say like on Sauce Labs, and run tests on the components there?
You can check this question

Using React-TL with real DOM in create-react-app

thumbsup
0
message-simple
3
like-fill
2
  • reply
  • like

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