samedi 20 juin 2020

Enzyme's .containsMatchingElement() passed in argument is undefined

I am trying to learn to test React components and have two simple class components, where one renders the other. I am trying to write a test that confirms that one component does render the other (I understand the use case for that might be silly but I'm new to this). This is my component below, App, and I am testing if it renders ReviewList.

    class App extends React.Component {
      constructor(props) {
        super(props);

        this.state = {
          reviews: '',
        };
      }



      render() {
        
        return (
          <div id="main">
            <h1>Working</h1>
            <ReviewHead />
            <ReviewList allReviews={reviews || null} />
          </div>
        );
      }
    }

I am using Jest and Enzyme, as recommended by a friend to do unit testing on the App component.

This is the test that I wrote

test('renders the review list to the dom', () => {
    const wrapper = shallow(<App />);
    expect(wrapper.containsMatchingElement(<ReviewList />)).to.equal(true)
  });

The Enzyme documentation says that you must pass in a ReactElement as an argument, but whenever I run the test I get ...

ReferenceError: ReviewList is not defined

      17 |   test('renders the review list to the dom', () => {
      18 |     const wrapper = shallow(<App />);
    > 19 |     expect(wrapper.containsMatchingElement(<ReviewList />)).to.equal(true)
         |                                             ^
      20 |   });
      21 | 
      22 | 

      at Object.<anonymous> (tests/app.test.js:19:45)

Things I tried :

  1. Importing ReviewList component
  2. Using just the actual HTML and trying to match that

Any ideas what I am doing wrong here? I am very new to this and can't seem to find much info about this method and use cases. If you know of a better way to test this, I would appreciate the tip!

Aucun commentaire:

Enregistrer un commentaire