Tests for accessible error messages | Call Kent Podcast | 24

Calls with Kent C. Dodds.

You call, I'll answer.

Record your call

Listen to the podcasts here

Apple podcasts Pocket Casts

Phone sitting on a stool

What's this all about?

The goal of the Call Kent Podcast is to get my answers to your questions. You record your brief question (120 seconds or less) right from your browser. Then I listen to it later and give my response, and through the magic of technology (ffmpeg), our question and answer are stitched together and published to the podcast feed.

I look forward to hearing from you!

Record your call

Calls with Kent C. Dodds Season 2 — 50 episodes

50.Why are you programming in VScode?

49.Remix: ways around window undefined

48.Testing a graphical component

47.Will there be a KCD Trilogy? (Yes)

46.How do you automate KCD?

45.Question about testing a reusable component

44.Full Stack Developers... Why?

43.Mantine's callback with Remix's ActionFunction

42.How do you convince your team to use E2E?

41.Migration from React/Rails hybrid to Remix

40.Do you have any thoughts on Playwright?

39.Using cookie/privacy policies on personal websites

38.Leveling up your career while putting family first

37.Live loading data with remix

36.Using VPN during software development

35.Why is there so much hate regarding React lately?

34.Decomposing remix component

33.Jump from mid level to senior react developer

32.React app doesn't work on IE11

31.Using userEvent vs fireEvent

30.useMemo vs React.Memo when it comes to JSX

29.How to build a committed following

28.Learning Frontend Architecture

27.Querying the data in nested routes

26.Nivo charts issue

25.i18n and Remix

24. Tests for accessible error messages

Keywords

testing-library, accessibility, accessible

Description

Hi Kent!

My name is Jan. I'd like to ask you: How do you write tests for accessible error messages with testing library?

By accessible error messages, I mean, suppose you have a form with an input. You have a p tag which renders the error, if there is an error. And that p tag has an id.

And now you pass this p tags id to the input as a value for the aria-describedby property.

So far, I'm using byText to check for the existence of that error in my tests, but I was wondering whether there is a better query for that?

Thank you!

Custom Queries

Tests for accessible error messages

23.Asserting props.onClick in react-testing-library

22.CatchBoundary on empty datasets

21.Remix Anti-patterns

20.Why Framer Motion for Animations

19.Lack of experience when problem solving

18.How to identify which button submits a form

17.Thinking process when reviewing code

16.Do you read the React source code?

15.Isolate FE and BE apps vs Remix Full Stack

14.Using Remix with a custom backend (Nestjs)

13.Feedback speed in TDD

12.Understand what's effect and what is derived state

11.Order of Courses to Take

10.State bloating vs api call (again and again)

09.Separation of rendering vs logics custom hooks

08.Imposter Syndrome and Working at FAANG

07.In a Startup only testing in the backend?

06.Using GraphQL queries in Remix loader functions

05.Servers + Databases + Remix

04.I love your website! ITS BEAUTIFUL.

03.How can I incentivize users to not share accounts?

02.Could the useState be used without the setter?

01.Best way to reset a form

50.Why are you programming in VScode?

49.Remix: ways around window undefined

48.Testing a graphical component

47.Will there be a KCD Trilogy? (Yes)

46.How do you automate KCD?

45.Question about testing a reusable component

44.Full Stack Developers... Why?

43.Mantine's callback with Remix's ActionFunction

42.How do you convince your team to use E2E?

41.Migration from React/Rails hybrid to Remix

40.Do you have any thoughts on Playwright?

39.Using cookie/privacy policies on personal websites

38.Leveling up your career while putting family first

37.Live loading data with remix

36.Using VPN during software development

35.Why is there so much hate regarding React lately?

34.Decomposing remix component

33.Jump from mid level to senior react developer

32.React app doesn't work on IE11

31.Using userEvent vs fireEvent

30.useMemo vs React.Memo when it comes to JSX

29.How to build a committed following

28.Learning Frontend Architecture

27.Querying the data in nested routes

26.Nivo charts issue

25.i18n and Remix

24. Tests for accessible error messages

Keywords

testing-library, accessibility, accessible

Description

Hi Kent!

My name is Jan. I'd like to ask you: How do you write tests for accessible error messages with testing library?

By accessible error messages, I mean, suppose you have a form with an input. You have a p tag which renders the error, if there is an error. And that p tag has an id.

And now you pass this p tags id to the input as a value for the aria-describedby property.

So far, I'm using byText to check for the existence of that error in my tests, but I was wondering whether there is a better query for that?

Thank you!

Custom Queries

Tests for accessible error messages

23.Asserting props.onClick in react-testing-library

22.CatchBoundary on empty datasets

21.Remix Anti-patterns

20.Why Framer Motion for Animations

19.Lack of experience when problem solving

18.How to identify which button submits a form

17.Thinking process when reviewing code

16.Do you read the React source code?

15.Isolate FE and BE apps vs Remix Full Stack

14.Using Remix with a custom backend (Nestjs)

13.Feedback speed in TDD

12.Understand what's effect and what is derived state

11.Order of Courses to Take

10.State bloating vs api call (again and again)

09.Separation of rendering vs logics custom hooks

08.Imposter Syndrome and Working at FAANG

07.In a Startup only testing in the backend?

06.Using GraphQL queries in Remix loader functions

05.Servers + Databases + Remix

04.I love your website! ITS BEAUTIFUL.

03.How can I incentivize users to not share accounts?

02.Could the useState be used without the setter?

01.Best way to reset a form

50.Why are you programming in VScode?

49.Remix: ways around window undefined

48.Testing a graphical component

47.Will there be a KCD Trilogy? (Yes)

46.How do you automate KCD?

45.Question about testing a reusable component

44.Full Stack Developers... Why?

43.Mantine's callback with Remix's ActionFunction

42.How do you convince your team to use E2E?

41.Migration from React/Rails hybrid to Remix

40.Do you have any thoughts on Playwright?

39.Using cookie/privacy policies on personal websites

38.Leveling up your career while putting family first

37.Live loading data with remix

36.Using VPN during software development

35.Why is there so much hate regarding React lately?

34.Decomposing remix component

33.Jump from mid level to senior react developer

32.React app doesn't work on IE11

31.Using userEvent vs fireEvent

30.useMemo vs React.Memo when it comes to JSX

29.How to build a committed following

28.Learning Frontend Architecture

27.Querying the data in nested routes

26.Nivo charts issue

25.i18n and Remix

24. Tests for accessible error messages

Keywords

testing-library, accessibility, accessible

Description

Hi Kent!

My name is Jan. I'd like to ask you: How do you write tests for accessible error messages with testing library?

By accessible error messages, I mean, suppose you have a form with an input. You have a p tag which renders the error, if there is an error. And that p tag has an id.

And now you pass this p tags id to the input as a value for the aria-describedby property.

So far, I'm using byText to check for the existence of that error in my tests, but I was wondering whether there is a better query for that?

Thank you!

Custom Queries

Tests for accessible error messages

23.Asserting props.onClick in react-testing-library

22.CatchBoundary on empty datasets

21.Remix Anti-patterns

20.Why Framer Motion for Animations

19.Lack of experience when problem solving

18.How to identify which button submits a form

17.Thinking process when reviewing code

16.Do you read the React source code?

15.Isolate FE and BE apps vs Remix Full Stack

14.Using Remix with a custom backend (Nestjs)

13.Feedback speed in TDD

12.Understand what's effect and what is derived state

11.Order of Courses to Take

10.State bloating vs api call (again and again)

09.Separation of rendering vs logics custom hooks

08.Imposter Syndrome and Working at FAANG

07.In a Startup only testing in the backend?

06.Using GraphQL queries in Remix loader functions

05.Servers + Databases + Remix

04.I love your website! ITS BEAUTIFUL.

03.How can I incentivize users to not share accounts?

02.Could the useState be used without the setter?

01.Best way to reset a form

50.Why are you programming in VScode?

49.Remix: ways around window undefined

48.Testing a graphical component

47.Will there be a KCD Trilogy? (Yes)

46.How do you automate KCD?

45.Question about testing a reusable component

44.Full Stack Developers... Why?

43.Mantine's callback with Remix's ActionFunction

42.How do you convince your team to use E2E?

41.Migration from React/Rails hybrid to Remix

40.Do you have any thoughts on Playwright?

39.Using cookie/privacy policies on personal websites

38.Leveling up your career while putting family first

37.Live loading data with remix

36.Using VPN during software development

35.Why is there so much hate regarding React lately?

34.Decomposing remix component

33.Jump from mid level to senior react developer

32.React app doesn't work on IE11

31.Using userEvent vs fireEvent

30.useMemo vs React.Memo when it comes to JSX

29.How to build a committed following

28.Learning Frontend Architecture

27.Querying the data in nested routes

26.Nivo charts issue

25.i18n and Remix

24. Tests for accessible error messages

Keywords

testing-library, accessibility, accessible

Description

Hi Kent!

My name is Jan. I'd like to ask you: How do you write tests for accessible error messages with testing library?

By accessible error messages, I mean, suppose you have a form with an input. You have a p tag which renders the error, if there is an error. And that p tag has an id.

And now you pass this p tags id to the input as a value for the aria-describedby property.

So far, I'm using byText to check for the existence of that error in my tests, but I was wondering whether there is a better query for that?

Thank you!

Custom Queries

Tests for accessible error messages

23.Asserting props.onClick in react-testing-library

22.CatchBoundary on empty datasets

21.Remix Anti-patterns

20.Why Framer Motion for Animations

19.Lack of experience when problem solving

18.How to identify which button submits a form

17.Thinking process when reviewing code

16.Do you read the React source code?

15.Isolate FE and BE apps vs Remix Full Stack

14.Using Remix with a custom backend (Nestjs)

13.Feedback speed in TDD

12.Understand what's effect and what is derived state

11.Order of Courses to Take

10.State bloating vs api call (again and again)

09.Separation of rendering vs logics custom hooks

08.Imposter Syndrome and Working at FAANG

07.In a Startup only testing in the backend?

06.Using GraphQL queries in Remix loader functions

05.Servers + Databases + Remix

04.I love your website! ITS BEAUTIFUL.

03.How can I incentivize users to not share accounts?

02.Could the useState be used without the setter?

01.Best way to reset a form

Looking for more content?

Have a look at these articles.

See the full blog

by Simon Caspersen

by Simon Caspersen

May 21st, 2018 — 6 min read

by Rob Potter

April 2nd, 2018 — 10 min read

Introducing the react-testing-library 🐐

brown and white cat in shallow focus shot

brown and white cat in shallow focus shot

October 28th, 2021 — 5 min read

Get a catch block error message with TypeScript