Question

我最近开始测试React App，但无法正确测试React App。请看下面的情况

反应组件

class Filter extends Component {
    constructor(props) {
        super(props)

        this.state = {
            sheetNames:this.props.sheetNames?this.props.sheetNames:[],
            sheetColumnDimensions:this.props.sheetColumnDimensions?this.props.sheetColumnDimensions:{},
     }
 }

render(){
      let list=
         this.state.sheetNames.map((sheetName,index)=>
             <React.Fragment key={index}> 
                   {   
                       this.state.sheetColumnDimensions[sheetName].map((column,idx)=>
                           <option key={idx} value={column}>{column}</option>
                       )
                   }
             </React.Fragment>
      );
     return (
         <div>
             <div id="fieldForFiltering">
                  <select id="columnForFilter"onChange={(event)=>this.handleOnChange(event)} >
                          {list}
                   </select>
             </div>           
         </div>
       )
}

export default Filter

对上述组件进行测试脚本

import React from 'react';
import FilterDetails from "../Components/Filters/FilterDetails";
import Adapter from 'enzyme-adapter-react-16';
import {shallow} from 'enzyme';
import * as enzyme from 'enzyme';


enzyme.configure({ adapter: new Adapter() });


describe('FilterDetails component test suite', () => {
    let props ={
        sheetNames:["Stocks","Returns"],
        sheetColumnDimensions:{Stocks:["Sales","Profit"],Returns:["Status","Quantity"]}
    }
    let wrapper = shallow(<FilterDetails {...props}/>);
    
    it("should render initial layout of FilterDetails.jsx ", () => {
        expect(wrapper.getElements()).toMatchSnapshot();
    });
})

在如上所述测试应用程序时，我无法在快照中看到列表<options value={column}>{column}</option>，它仅在{list}处不呈现任何内容，并且此后也无法测试按钮单击以及所有与列表相关的事件。如何迫使它呈现列表和测试？

预先感谢

Answer 1

在回答之前，我想提及一些问题以及代码的改进，这些问题不一定会导致测试失败，但是更正它们可能会使测试通过。

state中的逻辑改进。

这纯粹是基于首选项，但在这种情况下，三元运算符可以简化为简单的||，也更易于读写。

this.state = {
  sheetNames: this.props.sheetNames || [],
  sheetColumnDimensions: this.props.sheetColumnDimensions || {},
};

缺少handleOnChange事件处理程序。

<select id="columnForFilter" onChange={(event) => this.handleOnChange(event)}>
  {list}
</select>

您正在<select>内调用事件处理程序，上面的代码中缺少该事件处理程序，因此测试可能未引发任何错误。

这里还可以做一些小的改进。代替onChange={(event) => this.handleOnChange(event)}，只需onChange={this.handleOnChange}也可以完成这项工作。

语法错误：结尾缺少'}'。

该课程的最后大括号丢失了。测试会引发与此有关的错误。

答案

我尝试使用您提供的代码在本地重现该问题（已纠正语法错误）。除了语法错误外，我找不到任何错误，并且如下所述，快照确实包含{list}，即<option> .. </option>。

exports[`FilterDetails component test suite should render initial layout of FilterDetails.jsx  1`] = `
Array [
  <div>
    <div
      id="fieldForFiltering"
    >
      <select
        id="columnForFilter"
        onChange={[Function]}
      >
        <React.Fragment>
          <option
            value="Sales"
          >
            Sales
          </option>
          <option
            value="Profit"
          >
            Profit
          </option>
        </React.Fragment>
        <React.Fragment>
          <option
            value="Status"
          >
            Status
          </option>
          <option
            value="Quantity"
          >
            Quantity
          </option>
        </React.Fragment>
      </select>
    </div>
  </div>,
]
`;

您可以尝试的几种方法如下：

进行上述改进，并尝试是否正确生成快照。
快照可能已过时。进行任何更改并重新运行测试时，默认情况下，快照不会更新。要在每次更改时更新快照，请更新package.json中的测试脚本。

创建React应用

scripts: {
  "test": "react-scripts test --env=jsdom --updateSnapshot"
}

笑话

scripts: {
  "test": "jest --updateSnapshot"
}

如果以上方法均无效，请尝试删除并重新安装node_modules。

使用酶进行组件渲染功能测试

1 个答案: