dimanche 9 août 2020

How can I test functions as child in React? The snapshot is

I was creating a component that returns a label and a children, this child is a function that evaluates if the field has type 'input' or 'textarea' and returns it:

export const Field = ({
  fieldType,
}) => {
  return (
    <>
      <label htmlFor={name}> {label}</label>
      {() => {
        switch (fieldType) {
          case 'textarea':
            return (
              <textarea
              />
            );
          default:
            return (
              <input/>
            );
        }
      }}
    </>
  );
};

I like to start my test by creating a snapshot of the component

describe('Unit testing: <Field /> component', () => {
  test('Should render correctly ', () => {
    const wrapper = shallow(<Field fieldType='textarea' />);

    expect(wrapper).toMatchSnapshot();
  });
});

This is the result of my snapshot (I'm using enzyme-to-json):

exports[`Unit testing for Field component Should render correctly  1`] = `
<Fragment>
  <label
    htmlFor="testField"
  >
     
    Test Label
  </label>
  <Component />
</Fragment>
`;

As you can see, the child has been rendered just as and this is very fuzzy to me... I would like to know how can I exactly test that my component is really rendering either an input or a textarea...

Aucun commentaire:

Enregistrer un commentaire