如何为使用 jest 调用方法的组件编写测试用例

Question

I am new to Jest and Enzyme & facing an issue. Can someone help? Here is my jsx file (myTemplate.jsx):

export default (props) => {
  const oneSection = () => {
        return <div>Hello</div>
    };

  return (
    props.hasData ? { <div>Hey</div> } : { <div><oneSection/></div> }
   )
}

And this is my test file:

import React from "react";
import { shallow } from "enzyme";
import myTemplate from '../myTemplate';

 describe("template component", () => {
 const props= {
        hasData: false,
 }
 let myComponent = null;
    beforeAll(() => {
        myComponent = shallow(<myTemplate {...props}/>);
    })
    test("should render with initial state properly", () => {
        expect(myComponent).toMatchSnapshot();
    })
  })

Now this test case is running successfully. Snapshot is getting created with a div which has oneSection but oneSection is not getting replaced with actual html within it. Basically these lines are not getting covered:

 const oneSection = () => {
            return <div>Hello</div>
        };

How can i cover this piece of code using Jest and enzyme?

Answer 1

import React from 'react'
import { cleanup, render } from '@testing-library/react'

describe('DMReports', () => {
  afterEach(cleanup)
  test('DMReports: hasData true', () => {
    const { container } = render(
      <DMReports hasData={true}/>,
    )
    expect(container).toMatchSnapshot()
  })
  test('DMReports: hasData false', () => {
    const { container, getByText } = render(
      <DMReports hasData={false}/>,
    )
    expect(container).toMatchSnapshot()
    expect(getByText('Hello')).toBeTruthy()
  })
})