如何使用反应测试库编写嵌套组件的反应测试用例?

时间:2020-03-31 06:33:27

标签: reactjs unit-testing jestjs web-frontend react-testing-library

我有一个组件AdminDashboard,它在其中呈现了其他两个组件-LeaderBoard和ActivityList

如何使用React Testing库为此组件编写测试用例? 我的测试文件覆盖了50%。 我希望对此有100%的覆盖率

import React from 'react';
import LeaderBoard from '../LeaderBoard/LeaderBoard';
import ActivitiesList from '../ActivitiesList/ActivitiesList';

function AdminDashboard(props) {
    return (
        <div >
            <LeaderBoard />
            <ActivitiesList assigned={props.assigned} rows = {props.rows} getData = {props.getData} deleteActivity={(data)=>props.deleteActivity(data)}></ActivitiesList>
        </div>
    );
}

export default AdminDashboard;

我的AdminDashboard.test.js:

it("renders without crashing", ()=>{

    let assigned = [// dummy data];
    let rows = [ // dummy data];
    const getData = () => {

    }
    const deleteActivity = (activityId) => {

    }

    const div = document.createElement('div');
    ReactDOM.render(<AdminDashboard assigned={assigned} rows={rows} getData={getData} deleteActivity={(data) => deleteActivity(data)}/>,div);
})

it("matches snapshot", () => {

    let assigned = [ //dummy data ];
    let rows = [ //dummy data ];
    const getData = () => {

    }
    const deleteActivity = (activityId) => {

    }

    const tree = renderer.create(<AdminDashboard assigned={assigned} rows={rows} getData={getData} deleteActivity={(data) => deleteActivity(data)}/>).toJSON();
    expect(tree).toMatchSnapshot();
})

0 个答案:

没有答案