识别测试库React的组件和DOM

huangapple go评论63阅读模式
英文:

Identifying component and DOM for testing library React

问题

我有一个名为Student的组件

function Student(props) {
 const {gradeDetails, addressDetails} = props;
 const [marksData, setMarksData] = useState(null);

  function fetchMarksData() {
    let url = `/api/getMarks/${studentID}`;
    axios
      .get(url)
      .then(output => {
        setMarksData(output.data);
      });
  }
  return (
    <div>
      <label>{addressDetails.cityName}</label>
      <label>{marksData.marks}</label>
      {/* render other details here */}
    </div>
  )
}
export default Student;

我创建了一个测试,如下所示

test('Make sure student component renders for City testCity', () => {
  render(<Student gradeDetails={grdDetails} addressDetails={addDetails}/>);
  const cityExists = screen.findByDisplayValue(/testCity/i);
  expect(cityExists).toBeInTheDocument();

我的问题是:

  1. 如何查看呈现的DOM(HTML)以确保组件成功呈现?
  2. Student组件还有一个axios API调用 "getMarks()"。我需要模拟该API,以便Student组件能够呈现吗?如何做到这一点?
  3. 当我调用 expect(cityExists).toBeInTheDocument(); 时,我收到错误消息 "Received has value {}",所以我怀疑组件没有成功呈现。在这种情况下,我需要查看HTML。
英文:

I have a component named Student

function Student(props){
 const {gradeDetails,addressDetails}=props;
 const [marksData,setMarksData]=useState(null);
   

  function fetchMarksData()
       {
        let url=/api/getMarks/+studentID
        axios
            .get(url)
            .then(output=&gt; {
                              setMarksData(output.data); 
                           }
        }
        return ( 
                  &lt;div&gt;
                      &lt;label&gt;{addressDetails.cityName}&lt;/label&gt;
                      &lt;label&gt;{marksData.marks}&lt;/label&gt;
                      &lt;render other details here&gt;
                  &lt;/div&gt;)
    }
    export default Student;

I have created a test as follows

test(&#39;Make sure student component renders for City testCity&#39;,()=&gt;{
   render(&lt;Student gradeDetails={grdDetails} addressDetails={addDetails}/&gt;);
   const cityExists = screen.findByDisplayValue(/testCity/i);
   expect(cityExists).toBeInTheDocument();

My questions are:

  1. How to see the rendered DOM (HTML) to make sure the component is rendered successfully?
  2. Student component also has a axios API call "getMarks()". Do I need to mock that API also so that Student component will be rendered? How to do that?
  3. When I call expect(cityExists).toBeInTheDocument();, I am getting error message "Received has value {}" so i suspect that the component is not rendered successfully. In that case I need to see the HTML.

答案1

得分: 0

你可以使用 debug 查看 DOM。

const { debug } = render(<Student gradeDetails={grdDetails} addressDetails={addDetails}/>);

debug()

是的,你需要模拟 API。MSW 是最好的方法,可以参考这个链接:https://mswjs.io/docs/getting-started/integrate/node#using-manual-setup。这里有一篇很好的指南:https://www.stackbuilders.com/blog/testing-react-components-with-testing-library-and-mock-service-worker/

一旦在 jest 中设置好,你可以在 beforeAll 中这样做:

rest.get('/api/getMarks/:studentID', (req, res, ctx) => {
  return res(ctx.json({  })) // 将模拟数据放入对象中
})

对于第三个问题,我无法回答,因为我看不到 testCity 在你的组件中出现在哪里。

英文:

You can use debug to see the DOM

const { debug } = render(&lt;Student gradeDetails={grdDetails} addressDetails={addDetails}/&gt;);

debug()

Yes, you need to mock the API. MSW is the best way of doing this https://mswjs.io/docs/getting-started/integrate/node#using-manual-setup. Here is a nice guide: https://www.stackbuilders.com/blog/testing-react-components-with-testing-library-and-mock-service-worker/

Once setup in jest you can just do this in a beforeAll:

  rest.get(&#39;/api/getMarks/:studentID&#39;, (req, res, ctx) =&gt; {
    return res(ctx.json({  })) // PUT MOCKED DATA INSIDE THE OBJECT
  })

The third question I can't answer as I can't see where testCity appears in your component.

huangapple
  • 本文由 发表于 2023年2月18日 07:20:10
  • 转载请务必保留本文链接:https://go.coder-hub.com/75490058.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定