CODEWITHSUNDEEP
reactjsecmascript-6jestjs
user3006967
user3006967

Reputation: 3545

how to use facebook jest to test .jsx file, module can not be found

I am following this link to check to how use jest to test React code: https://facebook.github.io/jest/docs/tutorial-react.html

Everything is find until I want to test our current component. Out component is written like this:

let React = require('react');
var CheckboxWithLabel =  React.createClass({
    getInitialState: function() {
        return {
            isChecked: false
        }
    },
    onChange: function(){
        this.setState({isChecked: !this.state.isChecked});
    },
    render: function(){
        return (
                 <label>
                    <input
                      type="checkbox"
                      checked={this.state.isChecked}
                      onChange={this.onChange}
                    />
                    {this.state.isChecked ? this.props.labelOn : this.props.labelOff}
                  </label>  
        )
    }
});
module.exports = CheckboxWithLabel;

This is almost the same as the javasrcript version inside the tutorial except I changed it to babel format. And now, if I am using this:

jest.unmock("../CheckboxWithLabel");

import React from 'react';
import ReactDOM from 'react-dom';
import TestUtils from 'react-addons-test-utils';
import CheckboxWithLabel from '../CheckboxWithLabel';

describe('CheckboxWithLabel', ()=>{
    it('change the text after click', ()=>{
         // Render a checkbox with label in the document
        const checkbox = TestUtils.renderIntoDocument(
          <CheckboxWithLabel labelOn="On" labelOff="Off" />
        );
        const checkboxNode = ReactDOM.findDOMNode(checkbox);
     // Verify that it's Off by default
        expect(checkboxNode.textContent).toEqual('Off');

        // Simulate a click and verify that it is now On
        TestUtils.Simulate.change(
          TestUtils.findRenderedDOMComponentWithTag(checkbox, 'input')
        );
        expect(checkboxNode.textContent).toEqual('On');
    });
});

I got this exception:

Using Jest CLI v12.1.1, jasmine2, babel-jest
 FAIL  __tests__/checkboxWithLabel-test.js
● Runtime Error
  - Error: Cannot find module '../CheckboxWithLabel' from 'checkboxWithLabel-test.js'
        at Resolver.resolveModule (node_modules/jest-cli/node_modules/jest-resolve/src/index.js:117:17)
        at Object.<anonymous> (__tests__/checkboxWithLabel-test.js:1:162)

This is package.json:

{
  "dependencies": {
    "react": "~0.14.0",
    "react-dom": "~0.14.0"
  },
  "devDependencies": {
    "babel-core": "^6.9.0",
    "babel-jest": "^9.0.0",
    "babel-polyfill": "*",
    "babel-preset-es2015": "*",
    "babel-preset-react": "*",
    "jest-cli": "*",
    "react-addons-test-utils": "~0.14.0"
  },
  "scripts": {
    "test": "jest"
  },
  "jest": {
    "unmockedModulePathPatterns": [
      "<rootDir>/node_modules/react/",
      "<rootDir>/node_modules/react-dom/",
      "<rootDir>/node_modules/react-addons-test-utils/"
    ]
  }
}

and .babelrc is this:

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

Because most of our current code is written in .jsx format, using object style, not class style, how can I make this working with jest?

Thanks

Upvotes: 2

Views: 1622

Answers (1)

minheq
minheq

Reputation: 472

You need additional setting in your jest options:

"jest": {
  "moduleFileExtensions": [
    "js",
    "jsx"
  ],
}

This will allow jest to test files with .js and .jsx extensions

Upvotes: 5

Related Questions