React 单元测试函数与箭头函数答案

【问题标题】：React Unit test function vs ArrowFunctionReact 单元测试函数与箭头函数
【发布时间】：2019-04-21 14:34:18
【问题描述】：

我有两个 div 的简单页面。第二个 div 的背景颜色取决于 active 属性的状态。如果 active 为真，那么它应该使用 CSS 文件中的 .active 类，否则使用 .two 样式。

我为此场景编写了单元测试，以检查第二个 div 的样式在状态更改后是否已更改。

我意识到一件事，当我执行 style() 函数来获取正确的样式名称时，单元测试不起作用，并且我在第二个 div 上的样式没有更新。但是当我将 style 作为箭头函数执行时，一切正常。有谁知道，为什么会这样？ normal 函数调用有什么问题？为什么不调用 render()？

箭头函数控制台输出（预期）

console.log src/containers/Example/Example.test.js:18
  false
console.log src/containers/Example/Example.test.js:19
  two
console.log src/containers/Example/Example.test.js:21
  true
console.log src/containers/Example/Example.test.js:22
  active

正常功能（错误输出）

console.log src/containers/Example/Example.test.js:18
  false
console.log src/containers/Example/Example.test.js:19
  two
console.log src/containers/Example/Example.test.js:21
  true
console.log src/containers/Example/Example.test.js:22
  two

带箭头功能的组件

当您将 () => this.style() 替换为 this.style() 时，单元测试将失败。

import React, {Component} from 'react';
import styles from './Example.module.css';

class Example extends Component {

  state = {
    active: false
  };

  active = () => {
    this.setState({active: !this.state.active});
  };

  style = () => {
    return this.state.active ? styles.active : styles.two;
  };

  render() {
    return (
        <div>
          <div onClick={() => this.active()} className={styles.one}/>
          <div className={() => this.style()}/>
        </div>
    );
  }
}

export default Example;

组件的单元测试

import React from 'react';
import Adapter from 'enzyme-adapter-react-16';
import {configure, mount} from 'enzyme';
import styles from './Example.module.css';

import Example from './Example';

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

let component;

beforeEach(() => {
  component = mount(<Example/>);
});

it('description', () => {
  let two = component.find('div').at(2);
  console.log(component.state().active);
  console.log(two.props()["className"]());
  component.setState({active: true});
  console.log(component.state().active);
  console.log(two.props()["className"]());
});

对于第二种情况 this.style() 你需要稍微修改控制台输出

用这个 console.log(two.props()"className"); 替换这个 console.log(two.props()["className"]); >
用这个 console.log(two.props()"className"); 替换这个 console.log(two.props()["className"]); >

【问题讨论】：

标签： reactjs testing enzyme

【解决方案1】：

问题不在于单元测试，而在于 JavaScript 中函数的使用。它也适用于生产应用程序。

onClick prop 应该是一个函数。 () => this.style() 表达式是一个函数。 this.style()是调用style方法的结果，一个字符串。

由于style 方法已经绑定到组件实例（它是一个箭头），它不需要用另一个箭头包裹。应该是：

<div className={this.style}/>

【讨论】：