Testing a component with Jest

Question

I am new to Jest and JavaScript in general. I am trying to test my java script code with Jest.

After installing Jest and all the other dependencies around, the initial App.test.js will fail with the message:

 FAIL  src/App.test.js
 ● Test suite failed to run

TypeError: Cannot read property 'bool' of undefined

  2 | import logo from './logo.svg';
  3 | import './App.css';
> 4 | import { Grid, Row, Col, Table, Panel, Image, Tabs, Tab, Nav, NavItem, Alert} from 'react-bootstrap';
    | ^
  5 | import _ from 'lodash';
  6 | import $ from 'jquery';
  7 | import Request from 'react-http-request';

  at Object.<anonymous> (node_modules/react-overlays/lib/Transition.js:259:33)
  at Object.<anonymous> (node_modules/react-bootstrap/lib/Collapse.js:41:19)
  at Object.<anonymous> (node_modules/react-bootstrap/lib/index.js:62:18)
  at Object.<anonymous> (src/App.js:4:1)
  at Object.<anonymous> (src/App.test.js:3:1)

My question is how can I make this test pass?

I know this test should pass successfully when this is my package.json:

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "devDependencies": {
    "babel-jest": "^23.4.2",
    "babel-polyfill": "^6.26.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "enzyme": "^3.5.1",
    "jest": "^23.5.0",
    "react-addons-test-utils": "^15.6.2",
    "react-dom": "^16.4.2",
    "react-scripts": "0.6.1",
    "react-test-renderer": "^16.4.2"
  },
  "dependencies": {
    "adal-angular": "^1.0.13",
    "axios": "^0.15.3",
    "bootstrap": "^3.3.7",
    "jquery": "^3.1.1",
    "lodash": "^4.17.10",
    "react": "^16.4.2",
    "react-bootstrap": "^0.30.5",
    "react-bootstrap-typeahead": "^1.2.0",
    "react-http-request": "^1.0.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "jest",
    "eject": "react-scripts eject"
  },
  "description": "This project was bootstrapped with [Create React App (https://github.com/facebookincubator/create-react-app).",
  "main": "index.js",
  "author": "",
  "license": "ISC",
  "jest": {
      "moduleNameMapper": {
         "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
         "\\.(css|less)$": "<rootDir>/__mocks__/styleMock.js"
         },
   "resolver": null
  }

.babelrc

{
 "presets": ["env", "react"] 
}

App.js

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import { Grid, Row, Col, Table, Panel, Image, Tabs, Tab, Nav, NavItem, Alert} from 'react-bootstrap';
import _ from 'lodash';
import $ from 'jquery';
import Request from 'react-http-request';
import {AdminViewComponent} from './components/AdminViewComponent.js';
import {WholeScreen} from './components/WholeScreenComponent.js';




class App extends Component { 


  render() {

    var url = "./api/user/" + this.props.userName + "/";
    console.log("props = " + JSON.stringify(this.props));
    console.log("url = " + url);
    var userCompanyIcon;
    //if (this.props.tid == "49d3d3cf-cde6-4161-8d6d-1789042d7b01"){
    if (this.props.tid == "72f988bf-86f1-41af-91ab-2d7cd011db47" || this.props.tid == "49d3d3cf-cde6-4161-8d6d-1789042d7b01"){
      userCompanyIcon = <Image className="userCompanyIcon" src="microsoftgray.png" responsive/>;
    }


    return (
      <div className="App">
        <div className="App-header">
          <Grid>
          <Row>
          <Col xs={6} sm={6} md={6}>                       

          </Col>
          <Col xs={2} sm={2} md={2}>

          </Col>
          <Col xs={4} sm={4} md={4}>

            <div className="Hello">Hello, {this.props.fisrtName} </div>                       
          </Col>

          </Row>
          <Row>
            <Col xs={4}  sm={4}  md={4}  >
              {userCompanyIcon}
            </Col>
            <Col xs={4}  sm={4}  md={4}  >

            </Col>
            <Col xs={4} sm={4} md={4}>                       
              <Image className="companyIcon" src="MatanTransperent.png" responsive />              
            </Col>
          </Row>
          </Grid>                    
        </div>   


        <div className="App-content">

         <Request
          url= {url}
          method='get'
          accept='application/json'
          headers={{'Authorization': 'Bearer ' + this.props.token}}
          verbose={true}>
          {
              ({error, result, loading}) => {
                if (loading) {
                  return <div>loading...</div>;
                } else {
                  if (result == null || result.statusType == 4 ||result.statusType == 5){
                    return <div> an unknown error has occured.  </div>;
                  }
                  else{
                    var returnObject = JSON.parse(result.text);
                    if (returnObject.isAdmin == false){
                      return <WholeScreen data {returnObject.DonationsList}/>;
                    }
                    else if (returnObject.isAdmin == true){
                      return <AdminViewComponent token={this.props.token}/>;

                    }
                  }
                }
              }
            } 
          </Request>-
        </div>
      </div>
    );
  }
}

export default App;

Answer 1

The problem you are facing is this: You are using webpack to be able to import static files, in your case, an SVG image. Jest does not run the JavaScript sources and test files through webpack, only through Babel, which only supports importing JavaScript modules.

The solution how to handle this is explained here in the Jest docs: https://jestjs.io/docs/en/webpack#handling-static-assets

You have to tell test: “OK, if you encounter an line where I'm exporting an SVG or other static file, just import a mock JavaScript module instead.”

This is done by adding this to the Jest config in your package.json:

// package.json
{
  "jest": {
    "moduleNameMapper": {
      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js"
    }
  }
}

…and then you create a directory __mocks__ in the root of your project and put this file fileMock.js in there:

// __mocks__/fileMock.js
module.exports = 'test-file-stub';

The next issue you'll probably run into will be importing CSS files, which you should handle slightly differently, with a styleMock:

// package.json
{
  "jest": {
    "moduleNameMapper": {
      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
      "\\.(css|less)$": "<rootDir>/__mocks__/styleMock.js"
    }
  }
}

Mock file:

// __mocks__/styleMock.js
module.exports = {};