4

I am new to Jest test cases writing, Trying to write the test case for checking navigation in an react application.

Currently I have written test case which works like below: I have Login page which is having register link on it, which redirects user to the Register page. So what I am checking is 1. Loading the login page 2. Triggered Register link click event 3. So user moved to the Register page

but I am not able to check if the Register page is loaded or not? Is there any way to check the snapshot of the "Register" page and link in URL.

I have used jest, enzyme and react-test-render as shown in below code.

Login Page Html

<React.Fragment>       
    <BodyContainer noDrawer fullSpan>
      <Grid container spacing={0} className={classes.gridContainer}>
        <Grid item xs={12} md={6} lg={7} className="login--form">
          <div className="login--form--container">
            <img src={LogoPurple} alt="ABL" className="onboarding-logo" />
            <h3>Welcome back! Please login to your account.</h3>
              {error ? <p>{error}</p> : null}
              <Field name="email" component={renderTextField} label="Email" style={styles.formField}/>
              <Field name="password" component={renderTextField} label="Password" style={styles.formField} />
              <Field name="rememberMe" component={renderCheckbox} label="Remember Me" />
              <div className="has-spacing">
                <Button variant="raised" size="large" color="primary" className="extraLarge" type="submit" onClick={this.handleSubmit}>
                  Login
                </Button>
              </div>

              <Link to="forgot-password">Forgot Password</Link>
                <p className="need-account">
                  Need an account?
                  <Link to="/register">
                    <strong> Sign up</strong>
                </p>
              </Link>
            <LegalLinks />
          </div>
        </Grid>
      </Grid>
    </BodyContainer>
  </React.Fragment>

In above code register is the link used to navigate.

thanks in advance...

R.shitre
  • 51
  • 5
  • Probably, you don't have to write test for case "when user clicks `Link` element with `to` attribute equal to `/register`, he'll be redirected to `Register` page". It's essential functionality of `Link` component, and it's creators wrote all needed tests for it. – Andrew Miroshnichenko Apr 09 '18 at 09:19
  • Thanks Andrew. As per your suggestion do you mean to say that we cannot write the test case to check if the user is navigated to the correct URL? I want to write the integration test case for navigation. can you please brief your thoughts. – R.shitre Apr 09 '18 at 10:45
  • I won't say that it's impossible (write navigation test), but definitely it won't be easy and some workarounds (like, maybe, mocking `Router` functionality) will be applied. IMHO some different framework shoulld be used for integration tests. – Andrew Miroshnichenko Apr 09 '18 at 13:12

0 Answers0