fix: escape regexp in suggestions

Author: benmonro

src/__tests__/suggestions.js

@@ -163,6 +163,16 @@ test('should suggest img role w/ alt text', () => {
   )
 })
 
+test('escapes regular expressions in suggestion', () => {
+  renderIntoDocument(
+    `<img src="foo.png" alt="The Problem (picture of a question mark)" data-testid="foo" />`,
+  )
+
+  expect(() => screen.getByTestId('foo')).toThrowError(
+    /getByRole\("img", \{name: \/the problem \\\(picture of a question mark\\\)\/i\}\)/,
+  )
+})
+
 test('should suggest getByLabelText when no role available', () => {
   renderIntoDocument(
     `<label for="foo">Username</label><input data-testid="foo" id="foo" />`,

src/suggestions.js

@@ -26,12 +26,16 @@ function getLabelTextFor(element) {
   }
   return undefined
 }
-
+function escapeRegExp(string) {
+  return string.replace(/[.*+\-?^${}()|[\]\\]/g, '\\$&') // $& means the whole matched string
+}
 function makeSuggestion(queryName, content, {variant, name}) {
   return {
     queryName,
     toString() {
-      const options = name ? `, {name: /${name.toLowerCase()}/i}` : ''
+      const options = name
+        ? `, {name: /${escapeRegExp(name.toLowerCase())}/i}`
+        : ''
       return `${variant}By${queryName}("${content}"${options})`
     },
   }