Tester un composant de connexion avec Jest

Question

Je ne suis pas très doué pour les tests et je suis nouveau dans Jest et Enzyme. J'ai un composant de connexion qui consiste en deux composants TextInput pour le nom d'utilisateur et le mot de passe et un composant Bouton. Je teste chaque composant individuellement.

Je voudrais juste tester qu'un nom d'utilisateur et un mot de passe ont été renvoyés par onLogin.

Voici le composant :

export const onLogin = (user, password) => {
  console.log('User', user, 'Password', password)
  return [user, password];
};

function Login() {
  const [user, setUser] = useState("");
  const [password, setPassword] = useState("");

  return (
    <LoginWrapper>
      <Branding brand={brand.brandName} />
      <FormWrapper onSubmit={(e) => { e.preventDefault(); onLogin(user, password) }}>
        <Stack>
          <TextInput
            className="username"
            type="text"
            label="Username"
            onChange={e => setUser(e.target.value)}
          />
        </Stack>
        <Stack>
          <TextInput
            className="password"
            type="password"
            label="Password"
            onChange={e => {setPassword(e.target.value); console.log('user', user)}}
          />
        </Stack>
        <Stack padding="0" align="right">
          <Button type="submit">Login</Button>
        </Stack>
      </FormWrapper>
    </LoginWrapper>
  );
}

export default Login;

Mon test :

describe("<Login />", () => {
  it("renders text input correctly", () => {
    const tree = renderer.create(<ThemeProvider theme={themes.default}><Login /></ThemeProvider>).toJSON();
    expect(tree).toMatchSnapshot();
  });

  it("calls onLogin when button clicked", () => {
    const onSubmitMock = jest.fn();

    const component = Enzyme.mount(
      <ThemeProvider theme={themes.default}><Login onSubmit={onSubmitMock} /></ThemeProvider>
    );

    component.find("input.username").simulate('change', { target: { value: 'myUser' } })
    component.find("input.password").simulate('change', { target: { value: 'myPassword' } })
    component.find("form").simulate("submit");

    console.log("onClickMock.mock", onSubmitMock.mock)
    expect(onSubmitMock).toBeCalled()
  });
});

Résultats :

On s'attendait à ce que la fonction fantaisie soit appelée, mais elle ne l'a pas été.

Answer 1

Votre approche de test est correcte, sauf pour :

1. Dans votre test, vous vous moquez d'une fonction de rappel et vous la transmettez en tant que propriété. onSubmit à votre composant. Vous devez ensuite appeler cette fonction depuis votre composant lorsque vous soumettez le formulaire.
2. Au lieu de cela, vous appelez le onLogin sur votre composant qui n'a pas de répercussion.

Pour résoudre ce problème, déclarez les propriétés de votre fonction de composant comme un paramètre, et appelez props.onSubmit sur votre formulaire de soumission.

function Login(props) {
    const [user, setUser] = useState("");
    const [password, setPassword] = useState("");

    return (
        <LoginWrapper>
            <Branding brand={brand.brandName} />
            <FormWrapper onSubmit={(e) => { e.preventDefault(); props.onSubmit(user, password) }}>
                <Stack>
                    <TextInput
                        className="username"
                        type="text"
                        label="Username"
                        onChange={(e) => setUser(e.target.value)}
                    />
                </Stack>
                <Stack>
                    <TextInput
                        className="password"
                        type="password"
                        label="Password"
                        onChange={(e) => { setPassword(e.target.value) }}
                    />
                </Stack>
                <Stack padding="0" align="right">
                    <Button type="submit">Login</Button>
                </Stack>
            </FormWrapper>
        </LoginWrapper>
    );
}