Test login component with react hooks,

Question

I am trying to test the Login.js component of my app.

I am actually trying to test 3 things:

When the values in the inputs field are not filled the disabled prop is true.
When the values in the inputs field are filled the disabled prop is false.
When the values in the inputs field are filled the login-button should call handleSubmit.

My test is failing in the second test and regarding the third test, I am not sure how to approach this test.

If someone has a good idea what I am doing wrong will be appreciated.

//Login.js

import React, { useState } from 'react';
import axios from 'axios';
import useStyles from '../styles/LoginStyle';
import { useStatefulFields } from '../../hooks/useStatefulFields';

function Login({ success }) {
  const [values, handleChange] = useStatefulFields();
  const [error, setError] = useState();

  const handleSubmit = async () => {
    await axios.post('www.example.com', {values}, {key})
    .then((res) => {
      if (res.data.success) {
        success();
      } else {
        setError(res.data.error);
      }
    })
  };
  
  return (
    <div>
        <p className={classes.p}>Personalnummer</p>
        <input
          type="number"
          className={classes.input}
          onChange={handleChange}
          name="personal_number"
          title="personal_number"
        />
        <p className={classes.p}>Arbeitsplatz</p>
        <input
          type="number"
          onChange={(e) => handleChange(e)}
          name="workplace"
          title="workplace"
          className={classes.input}
        />

        <ColorButton
          id="login-button"
          className={
            (values.password && values.personal_number && values.workplace)
              ? classes.button
              : classes.buttonGray
          }
          disabled={!values.password && !values.personal_number && !values.workplace}
          size="large"
          onClick={
            values.password && values.personal_number && values.workplace
              ? handleSubmit
              : () => {}
          }
        >
        </ColorButton>
    </div>
  )
}

//useStatefulFields.js

import { useState } from 'react';

export function useStatefulFields() {
  const [values, setValues] = useState({});

  const handleChange = (e) => {
    setValues({
      ...values,
      [e.target.name]: e.target.value,
    });
  };

  return [values, handleChange];
}

//Login.test.js

import React from 'react';
import { shallow } from 'enzyme';
import Login from '../components/Workers/Login';

let wrapper;

beforeEach(() => {
  wrapper = shallow(<Login success={() => {}} />);
});

test('check if login button is disabled', () => {
  const loginButton = wrapper.find('#login-button');
  expect(loginButton.prop('disabled')).toEqual(true);
});

test('check if login button is not disabled', () => {
  const loginButton = wrapper.find('#login-button');
  wrapper.find('input[name="workplace"]').simulate('change', { target: { value: 'test' } });
  wrapper.find('input[name="password"]').simulate('change', { target: { value: 'test' } });
  wrapper.find('input[name="personal_number"]').simulate('change', { target: { value: 'test' } });
  expect(loginButton.prop('disabled')).toEqual(false);
});

Try ` wrapper.update();` once you simulate the change (just an assumption) — Sarun UK, Oct 06 '20 at 14:56

Sarun UK · Accepted Answer · 2020-10-06T15:32:19.740

0

Pass name and value once simulate the change.

test('check if login button is not disabled', () => {
  let loginButton = wrapper.find('#login-button');
  wrapper.find('input[name="workplace"]').simulate('change', { target: { name:'workplace', value: 'test' } });
  wrapper.find('input[name="password"]').simulate('change', { target: { name:'password', value: 'test' } });
  wrapper.find('input[name="personal_number"]').simulate('change', { target: {name: 'personal_number', value: 'test' } });
  loginButton = wrapper.find('#login-button');

  loginButton.props().onClick(); // for handleSubmit

  expect(loginButton.prop('disabled')).toEqual(false);
});

Make sure that you have the input field for the password also that I am not seeing in your question. Otherwise, the test will fail again.

edited Oct 06 '20 at 15:32

answered Oct 06 '20 at 15:23

Sarun UK

6,210
7
23
48

Yes, you are right, I forgot to add the password field but I added the values in the test and the test is passing, thanks! Do you know by chance how I can refer to handleSubmit function in order to make my third test? – AdirD Oct 06 '20 at 15:32
if it solves the issue please accept it as an answer. – Sarun UK Oct 06 '20 at 15:33
I think you have to mock the axios.post - https://stackoverflow.com/questions/45016033/how-do-i-test-axios-in-jest – Sarun UK Oct 06 '20 at 16:01
Even that all I want to check is if handleSubmit has been triggered and not the axios has been triggered inside the function ? – AdirD Oct 06 '20 at 16:28

Test login component with react hooks,

1 Answers1