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'.

因此，经过一些研究，我发现我必须在'use strict';的顶部加入foo-test.js。但是，出于某种原因，我仍然会收到相同的错误，除非我还在'use strict';的顶部包含foo.js。

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

Answer 1

似乎用jest测试了基本的ES2015类，需要使用strict，但是为了测试React Components，使用严格的＆＃39;不是必需的。这是一个例子

// 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

上的此主题中找到更多信息

那就是它！组件测试工作完美。我也尝试过浅渲染的同样例子，它也完美地工作了！希望这有帮助！

如何不放＆＃34;使用严格＆＃34;到处

1 个答案: