Блог

sample.js

  const Sample = () =gt; {  const [show, setShow] = useState(false);  const onShow = () =gt; {  setShow(!show);  }  return(  lt;divgt;  lt;button onClick={onShow}gt;{show ? 'Hide Text' : 'Show text'}lt;/buttongt;  {show amp;amp; lt;labelgt;Welcome!!lt;/labelgt;}  lt;/divgt;  ); }; export default Sample;  

Sample.test.js

 import Sample from '../components/sample'; import React from "react";   test('render Sample text matcher', () =gt; {  render(lt;Sample /gt;);  const titleElement = screen.getByText(/Welcome!!/)  expect(titleElement).toBeInTheDocument; })  

Это приводит к следующей ошибке. Как я могу написать тестовый случай, если элемент отображается со значением состояния?

 TestingLibraryElementError: Unable to find an element with the text: /Welcome!!/. 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.  

Сначала вам нужно нажать на свою кнопку. В противном show случае значение равно false, и текст не отображается.

Вы можете использовать:

 const button = screen.getByRole('button'); fireEvent.click(button); // import this from react-testing-library  

В качестве обходного пути сразу после рендеринга вы можете попробовать нажать на кнопку, которая активирует ваш дисплей :

 document.querySelector('button').click();