How in Jest testing to match a string which contains a "/" and gives a syntax error

user_7882685 0
Viewed 1477

In my React application, I'm writing a Jest testing to test if on screen I get a specific date, time, and timezone.

The test looks as it is

test('Local date time format - Europe no UK', () => {
  const date = '2021-08-26T08:06:14Z';
  const timezone = 'Europe/Berlin';

  render(
    <DateFormatter
      dateTime={date}
      timeZone={timezone}
      variant="localDateTime"
    />,
  );
  expect(screen.getByText(/26 Aug 2021, 8:06 (Europe/Berlin)/)).toBeVisible();
});

The test fails with a syntax error

 Test suite failed to run

    SyntaxError: /Users/jake/Desktop/Trialbee/admin-frontend/src/components/DateFormatter/DateFormatter.spec.js: Invalid regular expression flag (215:54)

      213 |     />,
      214 |   );
    > 215 |   expect(screen.getByText(/26 Aug 2021, 8:06 (Europe/Berlin)/)).toBeVisible();
          |                                                       ^
      216 | });
      217 |

I don't know how to make it work with the '/' as it is thinking is a regEx part but in reality, is a slash that is contained in the timezone string.

react-testing-library jestjs reactjs unit-testing regex
1 Answers

You need to escape the special characters (i.e. /, ( and )) in your regular expression with a backslash (i.e. \).

Change it to:

expect(screen.getByText(/26 Aug 2021, 8:06 \(Europe\/Berlin\)\)).toBeVisible();

A decent explanation of escaping special characters can be found here. The regex can be seen in action here.

user_2033710
Related