Question

我有两个div的简单页面。第二个div的背景颜色取决于活动属性的状态。如果 active 为true，则应使用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”]）; >

Answer 1

问题不是特定于单元测试的，而是JavaScript中函数的使用。它也将适用于生产应用。

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

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

<div className={this.style}/>

反应单元测试功能与ArrowFunction

1 个答案: