How to not put "use strict" everywhere

Question

I'm trying to write some tests for a React app I've been working on, and I figured I would use Jest since it's mentioned in the React docs.

I'm using Webpack and so far I've installed jest-cli, babel-jest, and I included the following configuration in package.json:

"jest": {
  "scriptPreprocessor": "./node_modules/babel-jest",
  "unmockedModulePathPatterns": [
    "./node_modules/react",
    "./node_modules/react-dom"
  ],
}

So, I'm writing the tests for some file foo.js. This file includes some other module bar.js (i.e. const bar = require('./bar');). Unfortunately, when I run jest I get the following error:

SyntaxError: Block-scoped declarations (let, const, function, class) not yet 
supported outside strict mode in file 'js/foo.js'.

So, after some research, I find out I have to include 'use strict'; at the top of foo-test.js. However, for some reason, I still get the same error unless I also include 'use strict'; at the top of foo.js.

So my question is: am I doing something wrong? If not, is there anyway for me to write my tests using Jest without having to write 'use strict'; at the top of all my source files?

Answer 1

It seems to test out basic ES2015 classes with jest, use strict is required, however to test React Components, 'use strict' isn't required. Here's an example

//CheckboxWithLabel.js

import React, {Component} from 'react';

class CheckboxWithLabel extends Component {
    constructor(){
        super(...arguments);
        this.state = {
            isChecked: false
        };
        this.onChange = this.onChange.bind(this);
    }

    onChange() {
        this.setState({
            isChecked: !this.state.isChecked
        });
    }

    render() {
        return (
            <label>
                <input type="checkbox"
                       checked={this.state.isChecked}
                       onChange={this.onChange} />
                {this.state.isChecked ? this.props.labelOn : this.props.labelOff }
            </label>
        );
    }
}

export default CheckboxWithLabel;

//CheckboxWithLabel_tests.js

jest.disableAutomock(); //use this instead of jest.autoMockOff()
import React from 'react';
import ReactDOM from 'react-dom';
import TestUtils from 'react-addons-test-utils';
import CheckboxWithLabel from '../source/components/CheckboxWithlabel';
// const CheckboxWithLabel = require('../source/components/CheckboxWithLabel');

describe('CheckboxWithlabel', () => {
    const shallowRenderer = TestUtils.createRenderer();
    //render a checkbox
    const checkbox = TestUtils.renderIntoDocument(
        <CheckboxWithLabel labelOn="On" labelOff="Off" />
    );


    // shallowRenderer.render(<CheckboxWithLabel labelOn="On" labelOff="Off" />)
    // const checkbox = shallowRenderer.getRenderOutput();

    // it('defaults to unchecked and off label', () => {
    //     const inputField = checkbox.props.children[0];
    //     const textNode = checkbox.props.children[1];
    //     expect(inputField.props.checked).toBe(false);
    //     expect(textNode).toEqual('Off');
    // })


    var checkboxNode = ReactDOM.findDOMNode(checkbox);
    // let checkboxElement = TestUtils.findRenderedDOMComponentWithTag(checkbox, 'input');

    it('defaults to Off label', () => {
        expect(checkboxNode.textContent).toEqual('Off');
        // expect(checkboxElement.checked).toBe(false); 
    });
})

Edited: This is not required anymore Notice the only caveat being that you have to explicitly add a auto_mock_off.js file that simply adds this line (it took me hours to figure this one out)

jest.autoMockOff();

More information can be found on this thread on github Github React Issue #932

That's it! the component testing works perfectly. I've also tried the same example with shallow rendering and it worked perfectly too! Hope this helps!