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

April 18, 2019 at 8:44pm
if you can't access the element via something like getByText or getByLabel, yes
Edited
  • reply
  • like

April 26, 2019 at 4:50pm
given that i have a button that looks like this
<button>
<span>Click Me</span>
</button>
how can i get the actual button and not the span? when i use getByText('Click Me') it returns the span, which is fine for firing events, but i'd like to confirm that the button is disabled in certain cases
  • reply
  • like
for what it's worth, i was able to select the actual button (not able to add a test id to it bc its actually an antd Button) by targeting the id.
const button = container.querySelector('button#my-id');
  • reply
  • like

April 29, 2019 at 4:30pm
getByText(/click me/i).closest('button') <-- that'll get you the button.
  • reply
  • like

May 1, 2019 at 7:46am
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
Edited
  • reply
  • like

May 13, 2019 at 8:03pm

Benefits of copying folder and file structure when using __test__ ?

thumbsup
0
message-simple
7
  • reply
  • like

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
Show more messages