Javascript 在测试React组件onClick时监视功能检查

我有一个父组件和一个子组件

父组件：

const ParentComponent = () => {

    const click_button = (role) => {
        document.getElementById(role).innerHTML = role;
    }

    return (
        <div>
            <ChildButton id= 'button_child' name='button_1' onClick={() => {
                click_button('role_1')
            }}/>
            <div>
                <p id="role_1"/>
                <p id="role_2"/>
                <p id="role_3"/>
            </div>
        </div>

    )

}

export default ParentComponent;

我的应用程序使用jest和酶进行测试。需要在ParentComponent中测试示例中的点击功能。但是，当我尝试访问按钮时，测试失败，这是因为按钮位于

childButton

组件中

因此，基本上问题是如何测试

ParentComponent

中的

单击按钮

功能

上面的例子是空的，酶文档说情况就是这样。现在我所看到的个人绕过这个问题的唯一方法就是“观察”控制台日志，这对我来说似乎有点黑客

我试图坚持使用Ezyme和Jest，因为这就是我编写单元测试的目的，我希望我的集成测试也能效仿

---

感谢您的帮助。

测试组件的行为，而不是实现细节。使用

enzyme

的

mount（）

功能一起测试父组件和子组件。React功能组件没有实例，但类组件有实例

例如

parent.jsx

：

import ChildButton from './child';

const ParentComponent = () => {
  const click_button = (role) => {
    document.getElementById(role).innerHTML = role;
  };

  return (
    <div>
      <ChildButton
        id="button_child"
        name="button_1"
        onClick={() => {
          click_button('role_1');
        }}
      />
      <div>
        <p id="role_1" />
        <p id="role_2" />
        <p id="role_3" />
      </div>
    </div>
  );
};

export default ParentComponent;

import React from 'react';

const ChildButton = (props) => {
  return (
    <React.Fragment>
      <button onClick={props.onClick}>{props.name}</button>
    </React.Fragment>
  );
};

export default ChildButton;

import React from 'react';
import ParentComponent from './parent';
import { mount } from 'enzyme';

describe('66698493', () => {
  beforeAll(() => {
    const div = document.createElement('div');
    div.setAttribute('id', 'container');
    document.body.appendChild(div);
  });
  it('should change the inner HTML', () => {
    const wrapper = mount(<ParentComponent />, { attachTo: document.getElementById('container') });
    expect(document.getElementById('role_1').innerHTML).toEqual('');
    wrapper.find('button').simulate('click');
    expect(document.getElementById('role_1').innerHTML).toEqual('role_1');
  });
});

parent.test.jsx

：

import ChildButton from './child';

const ParentComponent = () => {
  const click_button = (role) => {
    document.getElementById(role).innerHTML = role;
  };

  return (
    <div>
      <ChildButton
        id="button_child"
        name="button_1"
        onClick={() => {
          click_button('role_1');
        }}
      />
      <div>
        <p id="role_1" />
        <p id="role_2" />
        <p id="role_3" />
      </div>
    </div>
  );
};

export default ParentComponent;

import React from 'react';

const ChildButton = (props) => {
  return (
    <React.Fragment>
      <button onClick={props.onClick}>{props.name}</button>
    </React.Fragment>
  );
};

export default ChildButton;

import React from 'react';
import ParentComponent from './parent';
import { mount } from 'enzyme';

describe('66698493', () => {
  beforeAll(() => {
    const div = document.createElement('div');
    div.setAttribute('id', 'container');
    document.body.appendChild(div);
  });
  it('should change the inner HTML', () => {
    const wrapper = mount(<ParentComponent />, { attachTo: document.getElementById('container') });
    expect(document.getElementById('role_1').innerHTML).toEqual('');
    wrapper.find('button').simulate('click');
    expect(document.getElementById('role_1').innerHTML).toEqual('role_1');
  });
});

jest.config.js

：

module.exports={
预设：'ts jest/presets/js with ts'，
测试环境：“酶”，
SetupFileAfterEnv：[
“开玩笑的酶”，
],
setupFiles:['./jest.setup.js']，
测试环境选项：{
酶适配器：‘反应16’，
},
};

如果要同时“集成”测试父级和子级，为什么要进行浅层渲染？你不应该监视任何东西-测试的期望应该是更新相关元素的内容。“我希望知道已经调用了click_按钮函数”-不，你没有。在单独测试子级时，这可能是有意义的，在测试子级时，您检查是否调用了作为道具传递的函数，但在一起测试父级和子级时，您希望检查父级是否实现了正确的行为<代码>单击按钮是一个实现细节，在函数外部甚至无法访问它。好吧，我用错误的方法来处理这个问题。我应该如何准确地测试click_按钮？谢谢你，测试一下你的行为。当它被点击时，DOM应该被更新（虽然这不是一种反应方式），所以测试一下。感谢非常全面的答案！一切都有道理。祝你有一个美好的一天。