lundi 25 mai 2020

Test layout component which also has child component

I am trying to test Layout component which also has a child component passed via props. here is the code I have so far including layout component and test file:

LayoutOne.js

import React from 'react';
import PropTypes from 'prop-types';

const LayoutOne = props => {

    const {children} = props;

    return(
      <main className="main-content" data-test="layoutOneComponent">
         {children}
      </main>
    );

};

LayoutOne.propTypes = {
    children: PropTypes.node.isRequired
};

export default LayoutOne;

layout-one.test.js

import React from 'react';
import { shallow } from 'enzyme';
import LayoutOne from './LayoutOne';
import {testing} from '../../utils';

const TestComponent = () => (<div>my test component</div>);

describe('LayoutOne component', () => {

    describe('checking prop types', () => {

        it('should not throw a warning', () => {

            const simulateProps = {
               children: <TestComponent/>
            };

            const errorMsg = testing.checkProps(LayoutOne, simulateProps);

            expect(errorMsg).toBeUndefined();

        });

    });

    describe('renders', () => {

        let wrapped;

        beforeEach(() => {
            wrapped = shallow(
                <PublicMinimal>
                    <TestComponent/>
                </PublicMinimal>
            );
        });

        it('should render without errors', () => {

            expect(testing.getByTestAttr(wrapped, 'layoutOneComponent').length).toEqual(1);

        });

    });

});

to note, child component will have it's own separate tests so my question is whether or not more testing should be done within LayoutOne test file in order to test child somehow ? what's the best practice for more thorough testing ?

Aucun commentaire:

Enregistrer un commentaire