Trans component from react-i18next not working in testing-library/react

by

I have this simple component that shows a status based on props :

const CaseStatus = ({ closed }: { closed: boolean }) => {
  const getStatus = () => {
    return closed ? 'closed' : 'opened';
  };
  return (
    <div className={`case-status ${getStatus()}`}>
      <Trans i18nKey={`cases-list.grid.${getStatus()}`} />
    </div>
  );
};

and my test is also simple :

  it('renders the component with "closed" status', () => {
    render(<CaseStatus closed={true} />);
    const statusElement = screen.getByText('cases-list.grid.closed');
    expect(statusElement).toBeInTheDocument();
  });

But i got this error in the console when i run my test :

Unable to find an element with the text: cases-list.grid.closed. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible.

Ignored nodes: comments, script, style
<body>
  <div>
    <div
      class="case-status closed"
    />
  </div>
</body>

it looks like my test ignore the component. Should i mock it ? but how ?

My issue comes after a migration from react 17 to 18, including an update of every dependencies, so everything is up to date
thanks

Leave a Comment