menu
Channels
Team
Posts
Chat
Members
Info
Show previous messages

January 14, 2019 at 11:37am

hi, how to fire `online` event use react-testing-libray

  • reply
  • like

February 11, 2019 at 11:35pm

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?

  • reply
  • like

February 13, 2019 at 3:33pm

Hmm - looks like ReferenceError: describe is not defined is caused by jest-in-case:

ReferenceError: describe is not defined
at cases (https://62vm6x3w3z.codesandbox.io/node_modules/jest-in-case/index.js:23:3)
Edited
  • reply
  • like

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

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

@kentcdodds 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
1
  • reply
  • like