dimanche 15 novembre 2020

Trying to make a test for a reusable component with jest and enzyme

I've been able to set up shallow rendering tests for most of my components. This one is a reusable component with a life cycle method, so I believe I need to use mount. However the test is still failing...

this is the test

 import React from 'react';
 import { mount } from 'enzyme';
 import SingleAdhesive from './single-adhesive';

 describe('SingleAdhesive Tests', () => {

  it('Renders without creashing', () => {
    mount(<SingleAdhesive />)
  })

});

this is the component to test

import React, { Component } from 'react';
import { Redirect } from 'react-router-dom';
import { getAdhesives } from '../services/adhesives';

class SingleAdhesives extends Component {
  constructor(props) {
    super(props);
     this.state = { 
     adhesives: [],
     selected: "",
     redirect: false
    }
  }

  componentDidMount() {
    const { params } = this.props.match;
    this.setState({
      adhesives: getAdhesives(),
      selected: params
    })
  }


  render() { 

    const { adhesives, selected } = this.state;
    const glue = adhesives.filter(adhesive => adhesive.name === selected.id)

    return ( 
      <div className="container m-4 p-2">
        {glue.map(item => 
         <div key={item.name}>
          <h3>{item.name}</h3>
           <div>Type: {item.type}</div>
           <div>Color: {item.color}</div>
           <div>Packaging: {item.packaging}</div>
           <div>Shelf life: {item['shelf life']}</div>
          <div>Advantages: {item.advantages}</div>
        </div>
        )}
      </div>  
     );
  }
}

export default SingleAdhesives;

Aucun commentaire:

Enregistrer un commentaire