javascript - 使用 Enzymes 进行 React 组件渲染功能测试

问题描述

我最近开始测试 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} 的位置不呈现任何内容，并且无法测试按钮点击以及此后与列表相关的所有内容。如何强制它渲染列表和测试？

提前致谢

标签： javascriptreactjsjestjsenzyme

解决方案

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

中的逻辑改进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.

创建反应应用

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

笑话

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

如果以上都不起作用，请尝试删除并重新安装node_modules.

javascript - 使用 Enzymes 进行 React 组件渲染功能测试

问题描述

解决方案

推荐阅读