无法找到按钮以查找其测试的禁用状态

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

我相信此问题是由于未配置酶适配器造成的。请参阅酶文档以供参考。它说：要开始使用酶，您只需通过npm安装即可。您需要安装酶以及与您正在使用的反应版本（或其他UI组件库）相对应的适配器。例如，如果您将酶与React 16一起使用，则可以运行：npm i --save-dev enzyme enzyme-adapter-react-16安装完成后，您需要将酶配置为在测试中使用它：enzyme-adapter-react-16import { configure, shallow } from 'enzyme'import Adapter from 'enzyme-adapter-react-16'configure({ adapter: new Adapter() })溶液注意：我在下面使用钩子进行了解释，这可能是超出您问题范围的额外工作。但是，钩子是一个很好的学习工具。使用适配器将调用添加到&nbsp;Enzyme.configure&nbsp;可能会解决您的问题。我根据对组件所做的假设创建了一个工作解决方案，下面是该代码。我在 React 16.13 上这样做，这意味着我可以访问&nbsp;Hooks API具体来说，我正在使用使用Ref钩子。我在函数的主体中创建一个 ref，并为其分配按钮的 ref 值。钩子创建一个 ref，其中分配了通过调用作为调用参数传递的函数返回的值。useRefref.currentuseRef为了禁用有问题的按钮，我设置了，它由函数调用返回。disabled={buttonRef.current}canUpload形式.jsexport default ({&nbsp; getData: handleClick,&nbsp; getContent = () => <div>Content</div>,&nbsp; canUpLoad: checkCanUpload = () => true,}) => {&nbsp; const buttonRef = React.useRef(checkCanUpload())&nbsp; return (&nbsp; &nbsp; <React.Fragment>&nbsp; &nbsp; &nbsp; <div className="margin-2-l">Many other nested divs here</div>&nbsp; &nbsp; &nbsp; <button&nbsp; &nbsp; &nbsp; &nbsp; type="submit"&nbsp; &nbsp; &nbsp; &nbsp; className="btn margin-a margin-b margin-c margin-d"&nbsp; &nbsp; &nbsp; &nbsp; disabled={buttonRef.current}&nbsp; &nbsp; &nbsp; &nbsp; onClick={handleClick}&nbsp; &nbsp; &nbsp; >&nbsp; &nbsp; &nbsp; &nbsp; Load&nbsp; &nbsp; &nbsp; </button>&nbsp; &nbsp; &nbsp; <div className="flex padding-t">Many other nested divs here</div>&nbsp; &nbsp; &nbsp; <button&nbsp; &nbsp; &nbsp; &nbsp; type="submit"&nbsp; &nbsp; &nbsp; &nbsp; id="email"&nbsp; &nbsp; &nbsp; &nbsp; className="btn margin-a margin-b margin-c margin-d"&nbsp; &nbsp; &nbsp; &nbsp; ref={buttonRef}&nbsp; &nbsp; &nbsp; &nbsp; disabled={buttonRef.current}&nbsp; &nbsp; &nbsp; &nbsp; onClick={handleClick}&nbsp; &nbsp; &nbsp; >&nbsp; &nbsp; &nbsp; &nbsp; Send&nbsp; &nbsp; &nbsp; </button>&nbsp; &nbsp; </React.Fragment>&nbsp; )}形式规格.js在测试中，我确保调用 where 是 的默认导出。Enzyme.configure({ adapter: new Adapter() })Adapterenzyme-adapter-react-16import 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 = {&nbsp; name: '',}describe('MyComponent tests', () => {&nbsp; it('should render correctly', () => {&nbsp; &nbsp; const wrapper = shallow(<MyComponent someData={data} />)&nbsp; &nbsp; // also tried find('#email') and find('Button#email') not working.&nbsp; &nbsp; const submitButton = wrapper.find('button#email')&nbsp; &nbsp; console.log(submitButton.text())&nbsp; &nbsp; expect(submitButton.prop('disabled')).toBe(true)&nbsp; })})这是运行单元测试的输出：&nbsp;PASS&nbsp; src/Form.spec.js&nbsp; MyComponent tests&nbsp; &nbsp; √ should render correctly (11ms)&nbsp; console.log src/Form.spec.js:18&nbsp; &nbsp; SendTest Suites: 1 passed, 1 totalTests:&nbsp; &nbsp; &nbsp; &nbsp;1 passed, 1 totalSnapshots:&nbsp; &nbsp;0 totalTime:&nbsp; &nbsp; &nbsp; &nbsp; 3.796sRan all test suites related to changed files.您可以看到控制台输出的，并且测试已通过。Send演示请参阅此工作演示：https://codesandbox.io/s/react-playground-mkcgj使用 CodeSandbox 的注意事项是，由于 React 被包含两次，测试和浏览器渲染将无法同时工作。注释掉测试中的 以检查浏览器输出，在查看测试时，忽略“适配器未定义”，而只查看该测试的测试结果。configure但是，我建议将沙盒下载为zip（文件>导出到ZIP），然后将内容解压缩到本地文件夹中。 到目录中，并使用 或 安装依赖项。cdyarnnpm install然后，运行 或 启动开发服务器。yarn startnpm run start若要运行测试，请运行 或 。yarn testnpm run test