javascript - 如何在测试库中使用表达式正则获取预期的字符串？

Question

我正在尝试测试一个组件，当我单击“Adicionar ao final”（添加到末尾）或“Adicionar ao início”（添加到开头）按钮时，它会显示如下内容：

Id:1627223765317 Valor:1627223765317
Id:1627223765150 Valor:1627223765150

我想进行测试以获取这些渲染。

组件代码：

/* eslint-disable no-underscore-dangle */
/* eslint-disable react/no-this-in-sfc */
/* eslint-disable jsx-a11y/control-has-associated-label */
/* eslint-disable react/button-has-type */
import React, { useState } from 'react';
import PageDefault from '../../components/PageDefault';
import './index.scss';

function Keys() {
  const [objects, setObjects] = useState([]);
  return (
    <PageDefault>
      <form onSubmit={(event) => event.preventDefault()}>
        <div className="buttons-inputs">
          <button onClick={() => setObjects([
            {
              id: +new Date().valueOf(),
              valor: +new Date().valueOf(),
            },
            ...objects,
          ])}
          >
            Adicionar ao início
          </button>
          <button onClick={() => setObjects([
            ...objects,
            {
              id: +new Date().valueOf(),
              valor: +new Date().valueOf(),
            },
          ])}
          >
            Adicionar ao final
          </button>
          <button onClick={
          () => setObjects(objects.filter((object) => object.id !== objects[0].id))
        }
          >
            Remover do início
          </button>
          <button onClick={() => {
            setObjects(objects.filter((object) => object.id !== objects[objects.length - 1].id));
          }}
          >
            Remover do final
          </button>
        </div>
        <div className="lists">
          <div className="list-id">
            <h2>ID:</h2>
            {objects.map((object) => (
              <h1 key={object.id}>
                Id:
                {object.id}
                {' '}
                Valor:
                {object.valor}
              </h1>
            ))}
          </div>
          <div className="list-index">
            <h2>Index</h2>
            {objects.map((object, index) => (
              // eslint-disable-next-line react/no-array-index-key
              <h1 key={index}>
                Id:
                {object.id}
                {' '}
                Valor:
                {object.valor}
              </h1>
            ))}
          </div>
        </div>
      </form>
    </PageDefault>
  );
}

export default Keys;

测试：

import { fireEvent, render } from '@testing-library/react';
import { MemoryRouter } from 'react-router-dom';
import Keys from './index';

describe('Testing the rendering of components', () => {
  test('if it render component prop types exemple', () => {
    render(
      <MemoryRouter>
        <Keys />
      </MemoryRouter>,
    );
  });
  test('if it render component prop types exemple', () => {
    const { getByText, queryByText } = render(
      <MemoryRouter>
        <Keys />
      </MemoryRouter>,
    );

    fireEvent.click(getByText('Adicionar ao início'));
    expect(queryByText('Valor:^/0-9/i')).toBeInTheDocument();
  });
});

现在，它就像：“expect(queryByText('Valor:^/0-9/i')).toBeInTheDocument();” 但我认为正则表达式 'Valor:^/0-9/i' 不正确。我对写正则表达式有点困惑。提前致谢！