samedi 11 mars 2017

How to test component in inline-if with Jest/Enzyme?

I'm very new to testing in React and I couldn't find a way to test whether a component is rendered conditionally. For example, enzyme.shallow can find h1 tag but cant find h2 in my case. What is the right way to test this scenario?

Thanks in advance!

This is my test:

 describe('<ConnectedCompanyContainer />', () => {

  const store = mockStore({

    companies: {
      isFetchingCompanies: true,
      items: null
    }
  });
  const wrapper = shallow(
    <ConnectedCompanyContainer store={store} />
  );

  it('shows loading indicator when fetching companies', () => {
    expect(wrapper.find('h2').length).toBe(1); // not passing. expected 1, received 0.

  });
})

This is the container component:

export class CompanyContainer extends Component {

  //...
  render() {

    const { isFetchingCompanies, companies } = this.props;
    return (
      <div>
        <h1>test</h1>
        {isFetchingCompanies && !companies &&
          <h2>loading...</h2>
        }

        {companies &&
          <Companies companies={companies} />
        }
      </div>
    );
  }
}

const mapStateToProps = (state) => {
  //...
}

export default connect(mapStateToProps)(CompanyContainer);

Aucun commentaire:

Enregistrer un commentaire