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
Posts
Chat
Members
Info
Show previous messages

March 2, 2019 at 8:07pm
I see lots of examples in CodeSandbox, but today when I tried a number of them the tests are always failing, with errors like Can't find variable: describe or undefined expect or tests just hanging. As a concrete example: https://codesandbox.io/s/lp057z0vxz - it is from How NOT to test custom React hooks (and how to test them) video https://youtu.be/0e6WCQYg5tU). Also the tests from the testingjavascript course seem to be failing with errors like Unexpected frame by generating stack, Can't find variable: expect, Can't find variable: afterEach.
Is it just me or more people observe these problems with Codesandbox recently?
had the same experience a couple of days ago
  • reply
  • like

March 4, 2019 at 2:09am

March 4, 2019 at 8:51am
Not sure I find this bot useful. Now I get double notifications for every new post. But maybe it's just me
like-fill
2
  • reply
  • like

March 26, 2019 at 9:55am
Hi guys! How do you test executing modal by clicking button? Is there any way to test is modal exist inside DOM without rendering it on test?
  • reply
  • like

April 2, 2019 at 6:09pm
I test modals by checking if the rendered content changes
  • reply
  • like
Not sure if thats the right approach though
  • reply
  • like

April 18, 2019 at 8:38pm
Is it expected that one add the attribute data-testid to their actual components, just to run a test?
  • reply
  • like
or at least get the element that has that id?
  • reply
  • like
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

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
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