如何不到处放 "use strict"

Question

我正在尝试为我一直在开发的 React 应用程序编写一些测试，我想我会使用 Jest，因为 React 文档中提到了它。

我正在使用 Webpack，到目前为止我已经安装了 jest-cli、babel-jest，并且我在 package.json 中包含了以下配置：

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

所以，我正在为某个文件编写测试 foo.js。此文件包含一些其他模块 bar.js（即 const bar = require('./bar');）。不幸的是，当我运行 jest 时出现以下错误：

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

所以，经过一些研究，我发现我必须在 foo-test.js 的顶部包含 'use strict';。但是，出于某种原因，除非我 also 在 foo.js.

的顶部包含 'use strict';，否则我仍然会遇到相同的错误

所以我的问题是：我做错了什么吗？如果没有，我是否可以使用 Jest 编写测试而不必在所有源文件的顶部写 'use strict';？

Answer 1

似乎是在开玩笑地测试基本的 ES2015 类，使用 strict 是必需的，但是要测试 React 组件，'use strict' 不是必需的。这是一个例子

//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); 
    });
})

已编辑：不再需要 ~~请注意，唯一需要注意的是，您必须显式添加一个 auto_mock_off.js 文件，该文件只添加了这一行（我花了几个小时才弄明白）~~

~~jest.autoMockOff();~~

可以在 github Github React Issue #932

上的此线程中找到更多信息

就是这样！组件测试工作完美。我也尝试过使用浅层渲染的相同示例，它也工作得很好！希望这对您有所帮助！

如何不到处放 "use strict"

How to not put "use strict" everywhere

testing

reactjs

jestjs