react-testing-library 學習

const Button = ({langHelper, action}) => <button type="button" onClick={action}>{langHelper('clickMe')}</button>;

test('callback is called onClick', () => {
  const langHelper = jest.fn().mockImplementation(key => key);
  const callback = jest.fn();

  render(<Button action={callback} langHelper={langHelper} />);

  // multiple ways to do the same here.
  // - since you have only a single button, cannot possible select anything else here than the one you have
  userEvent.click(screen.getByRole('button'));
  // - using the i18n translation key. since langHelper is mocked, we know that this is the key we should see
  userEvent.click(screen.getByText('clickMe'));
  // - basically the same as yours, just without regex
  userEvent.click(screen.getByRole('button', {name: 'clickMe' }));
  // - yours
  userEvent.click(screen.getByRole('button', {name: /clickMe/i}));

  expect(callback).toHaveBeenCalledTimes(1);
});

這是多語系的範例