How to define props in a enzyme-jest test

Question

I have a react component that is throwing an error when I try to run a test using jest & enzyme here is the component:

 import React, { Component } from 'react' import './login.scss' class LoginContainer extends Component { componentWillMount() { if (this.props.location.search) { sessionStorage.setItem('hash', this.props.location.search); this.props.history.push(this.props.goto); } } okta = () => { window.location.href = this.props.oktaRef; } render() { return (<div className="container"> <div className="card card-container"> <button className="btn btn-lg btn-primary btn-block btn-signin" onClick={this.okta}> Login with Okta </button> </div> </div>); } } export default LoginContainer;

Now when I run my test I get an error in the componentWillMount lifecycle event:

yarn run test
yarn run v1.3.2
$ cross-env BABEL_ENV=test NODE_ENV=test jest
PASS  __tests__/navbar.test.js
PASS  __tests__/input-field.test.js
PASS  __tests__/field-group.test.js
PASS  __tests__/loading-animation.test.js
FAIL  __tests__/LoginContainer.test.js
 ● Console

console.error node_modules/react-dom/cjs/react-dom.development.js:9627
  The above error occurred in the <LoginContainer> component:
      in LoginContainer (created by WrapperComponent)
      in WrapperComponent

  Consider adding an error boundary to your tree to customize error handling behavior.

 ● <LoginContainer /> › renders one LoginContainer component

TypeError: Cannot read property 'search' of undefined

   componentWillMount() {
  10 |
> 11 |     if (this.props.location.search = true) {
  12 |       sessionStorage.setItem('hash', this.props.location.search);
  13 |       this.props.history.push(this.props.goto);
  14 |     }

  at LoginContainer.componentWillMount (src/containers/login/container/LoginContainer.jsx:7:54)
  at callComponentWillMount (node_modules/react-dom/cjs/react-dom.development.js:6860:16)
  at mountClassInstance (node_modules/react-dom/cjs/react-dom.development.js:6956:7)
  at updateClassComponent (node_modules/react-dom/cjs/react-dom.development.js:8325:9)
  at beginWork (node_modules/react-dom/cjs/react-dom.development.js:8966:16)
  at performUnitOfWork (node_modules/react-dom/cjs/react-dom.development.js:11798:16)
  at workLoop (node_modules/react-dom/cjs/react-dom.development.js:11827:26)
  at renderRoot (node_modules/react-dom/cjs/react-dom.development.js:11858:9)
  at performWorkOnRoot (node_modules/react-dom/cjs/react-dom.development.js:12422:24)
  at performWork (node_modules/react-dom/cjs/react-dom.development.js:12343:9)

Test Suites: 1 failed, 4 passed, 5 total
Tests:       1 failed, 9 passed, 10 total
Snapshots:   0 total
Time:        2.855s
Ran all test suites.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

What would be the best way to write my test? Here is my test:

 /** * @jest-environment node */ import React from 'react' import {LoginContainer} from '../src/containers/login' import { shallow, mount } from "enzyme"; describe("<LoginContainer />", () => { it("renders one LoginContainer component", () => { let wrapper = mount(<LoginContainer />); expect(wrapper.find(LoginContainer).length).toBe(1); }); });

Answer 1

For passing props, it's like Matt Holland answered in the comments. However, I think your problem is another one; it's the router. this.props.location doesn't exists in your test.

You need something like the MemoryRouter from react-router

import React from 'react'
import { MemoryRouter } from 'react-router';
import {LoginContainer} from '../src/containers/login'
import { shallow, mount } from "enzyme";

describe("<LoginContainer />", () => {
  it("renders one LoginContainer component", () => {
    let wrapper = mount(
      <MemoryRouter initialEntries={[ '/random' ]}>
         <LoginContainer />
      </MemoryRouter>
    )
    expect(wrapper.find(LoginContainer).length).toBe(1);
  });
});