无法找到按钮以找到其禁用状态以进行测试
Unable to find button to find its disable status for test
我只是想写一个简单的测试来检查按钮是否处于禁用状态。
但看起来我没有正确选择按钮。
请问我做错了什么吗?谢谢你。
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);
});
});
我认为这个问题是由于没有配置酶适配器。请参阅 Enzyme documentation 以供参考。它说:
To get started with enzyme, you can simply install it via npm. You will need to install enzyme along with an Adapter corresponding to the version of react (or other UI Component library) you are using. For instance, if you are using enzyme with React 16, you can run:
npm i --save-dev enzyme enzyme-adapter-react-16
安装 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 上执行此操作,这意味着我可以访问 Hooks API
具体来说,我正在使用 useRef
挂钩。我在函数体中创建了一个 ref,并将按钮的 ref 值赋给它。 useRef
挂钩创建一个 ref,其中 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.io/s/react-playground-mkcgj
使用 CodeSandbox 的警告是测试和浏览器渲染不会同时工作,因为 React 被包含两次。注释掉测试中的configure
以检查浏览器输出,并且在查看测试时忽略"Adapter is not defined"并只查看该测试的测试结果。
但是,我建议将该沙盒下载为 zip 文件(文件 > 导出为 ZIP),然后将内容解压缩到本地文件夹中。 cd
进入目录并使用 yarn
或 npm install
.
安装依赖项
然后,运行yarn start
或npm run start
启动开发服务器。
要运行测试,运行yarn test
或npm run test
.
我只是想写一个简单的测试来检查按钮是否处于禁用状态。 但看起来我没有正确选择按钮。
请问我做错了什么吗?谢谢你。
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);
});
});
我认为这个问题是由于没有配置酶适配器。请参阅 Enzyme documentation 以供参考。它说:
To get started with enzyme, you can simply install it via npm. You will need to install enzyme along with an Adapter corresponding to the version of react (or other UI Component library) you are using. For instance, if you are using enzyme with React 16, you can run:
npm i --save-dev enzyme enzyme-adapter-react-16
安装 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 上执行此操作,这意味着我可以访问 Hooks API
具体来说,我正在使用 useRef
挂钩。我在函数体中创建了一个 ref,并将按钮的 ref 值赋给它。 useRef
挂钩创建一个 ref,其中 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.io/s/react-playground-mkcgj
使用 CodeSandbox 的警告是测试和浏览器渲染不会同时工作,因为 React 被包含两次。注释掉测试中的configure
以检查浏览器输出,并且在查看测试时忽略"Adapter is not defined"并只查看该测试的测试结果。
但是,我建议将该沙盒下载为 zip 文件(文件 > 导出为 ZIP),然后将内容解压缩到本地文件夹中。 cd
进入目录并使用 yarn
或 npm install
.
然后,运行yarn start
或npm run start
启动开发服务器。
要运行测试,运行yarn test
或npm run test
.