0

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>

test case --

 it('Terms of use link test ',()=>{
const component = renderer.create(
  <StaticRouter location="terms" context={props}>
    <Link to="/terms">Terms of use.&nbsp;</Link>
</StaticRouter>);
let tree = component.toJSON();
expect(tree).toMatchSnapshot(); });

it('Privacy policy link test ',()=>{
const component = renderer.create(
  <StaticRouter location="privacy" context={props}>
    <Link to="/privacy">Privacy policy</Link>
</StaticRouter>);
let tree = component.toJSON();
expect(tree).toMatchSnapshot();});

In above code register is the link used to navigate. please give me any suggestion. Thanks....

skyboyer
  • 22,209
  • 7
  • 57
  • 64
vipul1415
  • 1
  • 1

0 Answers0