dimanche 27 septembre 2020

Testing imported components that are rendered in a different component with Enzyme

I am doing some testing with React/Jest/Enzyme and I am just a bit stuck on how (or if I should) to test components that have been imported into a component like so:

import React from 'react'
import Services from './Services'
import Team from './Team'
import Customers from './Customers'


class Main extends React.Component {

    render() {
        return (
            <React.Fragment>
                <div id="main">
                    <Services />
                    <Team />
                    <Customers />
                </div>
            </React.Fragment>
        )
    }
}

export default Main

So I am looking to test Services, Team , Customers that are rendered in the Main component. Is it really best to have something like this (which I haven't checked by the way, just as a quick draft to show an example):

  test('Services imports and renders correctly', () => {
    const wrapper = mount(
      <MemoryRouter>
        <Services />
      </MemoryRouter>
    );
    expect(wrapper.find(Services)).toHaveLength(1);
  });

Any code, tips, guidance to syntax would be super helpful!

Many thanks :)

Aucun commentaire:

Enregistrer un commentaire