无法找到按钮，无法找到其测试的禁用状态。

Question

我只是想写一个简单的测试，以便能够检查一个按钮是否处于禁用状态。但看起来我没有正确选择按钮。

我可以知道我做错了什么吗？谢谢你。

return (
    <Fragment>
    {(isAutomatic) && (
        <div className="margin-b">
        <!-- Many other nested divs here -->
        </div>
    )}

    <div className="flex">
        <!-- Many other nested divs here -->
    </div>

    {is_something_true && (<div id="inputAlert" className="alert-form">Alert message</div>)}

    <div className="margin-2-l">
        <!-- Many other nested divs here -->
    </div>

    <button type="submit" className="btn margin-a margin-b margin-c margin-d" disabled={canUpLoad()} onClick={() => getContent()}>Load</button>

    <div className="flex padding-t">
        <!-- Many other nested divs here -->
    </div>

    <!-- Trying to capture this button and check if it is disabled -->
    <button type="submit" id="email" className="btn margin-a margin-b margin-c margin-d" disabled={false} onClick={() => getData()}>Send</button>
    </Fragment>
);

我的测试

import React from 'react';
import { shallow, mount } from 'enzyme';
import MyComponent from '../../../../src/space/components/MyComponent';


const data = {
    name: ''
}

describe('MyComponent tests', () => {
  it('should render correctly', () => {
    const wrapper = shallow(<MyComponent someData={data} />);

    // also tried find('#email') and find('Button#email') not working.
    const submitButton = wrapper.find('button#email'); 
    console.log(submitButton.text()); // trying to get the value 'Send' for this button but nothing gets printed. Same for submitButton.text
    // this test fails.
    expect(submitButton.prop('disabled')).toBe(false);
  });
});

Answer 1

我相信这个问题是由于 没有配置酶适配器. 见 酶文件 以供参考。它说。

要开始使用enzyme，你可以通过npm安装它。你需要在安装enzyme的同时，安装一个与你使用的react（或其他UI组件库）版本对应的Adapter。例如，如果你使用enzyme和React 16，你可以运行。

npm i --save-dev enzyme enzyme-adapter-react-16

一旦你有了Enzyme enzyme-adapter-react-16 安装后，您需要配置Enzyme以在您的测试中使用它。

import { configure, shallow } from 'enzyme'
import Adapter from 'enzyme-adapter-react-16'

configure({ adapter: new Adapter() })

解决方案

注意：我在下面解释了如何使用钩子，这可能是你问题范围之外的额外工作。然而，钩子是一个很好的工具，可以了解一下。很可能在你的问题中加入对 Enzyme.configure 与适配器一起使用将解决你的问题。

我基于对你的组件的假设，创建了一个可行的解决方案，下面是那个代码。我是在React 16.13上做的，这意味着我可以访问到 钩子API

具体来说，我使用的是 useRef 钩子。我在函数的主体中创建了一个 ref，并为按钮分配了一个 ref 的值。这个 useRef 钩子创建一个参考，其中 ref.current 的参数所传递的函数所返回的值。useRef 呼叫。

为了禁用该按钮，我将其设置为 disabled={buttonRef.current}，它是由 canUpload 函数调用。

Form.js

export default ({
  getData: handleClick,
  getContent = () => <div>Content</div>,
  canUpLoad: checkCanUpload = () => true,
}) => {
  const buttonRef = React.useRef(checkCanUpload())

  return (
    <React.Fragment>
      <div className="margin-2-l">Many other nested divs here</div>

      <button
        type="submit"
        className="btn margin-a margin-b margin-c margin-d"
        disabled={buttonRef.current}
        onClick={handleClick}
      >
        Load
      </button>

      <div className="flex padding-t">Many other nested divs here</div>

      <button
        type="submit"
        id="email"
        className="btn margin-a margin-b margin-c margin-d"
        ref={buttonRef}
        disabled={buttonRef.current}
        onClick={handleClick}
      >
        Send
      </button>
    </React.Fragment>
  )
}

Form.spec.js

在测试中，我确保调用 Enzyme.configure({ adapter: new Adapter() }) 哪儿 Adapter 的默认输出。enzyme-adapter-react-16.

import React from 'react'
import { shallow, configure } from 'enzyme'
import MyComponent from './Form'
import Adapter from 'enzyme-adapter-react-16'

configure({ adapter: new Adapter() })

const data = {
  name: '',
}

describe('MyComponent tests', () => {
  it('should render correctly', () => {
    const wrapper = shallow(<MyComponent someData={data} />)

    // also tried find('#email') and find('Button#email') not working.
    const submitButton = wrapper.find('button#email')
    console.log(submitButton.text())
    expect(submitButton.prop('disabled')).toBe(true)
  })
})

这是运行单元测试的输出。

 PASS  src/Form.spec.js
  MyComponent tests
    √ should render correctly (11ms)

  console.log src/Form.spec.js:18
    Send

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        3.796s
Ran all test suites related to changed files.

你可以看到 Send 输出，并且测试通过。

演示

请看这个工作演示。https:/codesandbox.iosreact-playground-mkcgj。

使用CodeSandbox的注意事项是，由于React被包含了两次，测试和浏览器渲染不会同时工作。请将以下内容注释出来 configure 中检查浏览器的输出，看测试时，忽略 "Adapter is not defined"，只看那一个测试的测试结果。

不过，我建议把那个沙盒下载成zip文件（File > Export to ZIP），然后把内容解压到本地文件夹中。cd 到目录中，并安装依赖关系与 yarn 或 npm install.

然后，运行 yarn start 或 npm run start 来启动开发服务器。

要运行测试，请运行 yarn test 或 npm run test.