使用玩笑和 enzyme 在 react 中编写单元测试。在检查组件状态时,它会抛出错误“ReactWrapper::state() 只能在类组件上调用”。
import React from 'react';
import { mount } from 'enzyme';
import expect from 'expect';
import CustomerAdd from '../CustomerAdd'
import MUITheme from '../../../../Utilities/MUITheme';
import { ThemeProvider } from '@material-ui/styles';
describe('<CustomerAdd />', () => {
const wrapper = mount(
<ThemeProvider theme={MUITheme}>
<CustomerAdd {...mockProps}></CustomerAdd>
</ThemeProvider>
);
test('something', () => {
expect(wrapper.find(CustomerAdd).state('addNewOnSubmit')).toEqual(true);
});
});
在上面的代码中 CustomerAdd Component 是类组件。我不知道我的代码有什么问题。任何人都可以帮助我解决这个问题。提前致谢。
最佳答案
所以你的默认导出
export default withStyles(styles)(CustomerAdd);
导出有关基于类的组件的功能(HOC)包装器。如果类名和导入都没有关系
import CustomerAdd from '../CustomerAdd'
是平等的。您的测试导入包装版本,并在调用
.find(CustomerAdd)
后返回该 HOC 而不是您的类(class)。而且您无法使用实例。短时间解决方案:将类直接导出为命名导出。
export class CustomerAdd extends React.Component{
...
}
export default withStyles(styles)(CustomerAdd);
在您的测试中使用命名导入:
import { CustomerAdd } from '../CusomerAdd';
Quick'n'dirty 解决方案:使用
.dive
访问您的底层基于类的组件:expect(wrapper.find(CustomerAdd).dive().state('addNewOnSubmit')).toEqual(true);
这是相当反模式的,因为如果您在默认导出中添加任何额外的 HOC,您将需要通过添加适当数量的
.dive().dive()....dive()
调用来修补所有相关测试。长期解决方案:避免测试状态,这是实现细节。
而是专注于验证已呈现的内容。然后,在许多不同的重构技术(例如用功能组件替换类、重命名状态/实例成员、提升状态、将组件连接到 Redux 等)的情况下,您是安全的。
关于reactjs - ReactWrapper::state() 只能在类组件 Unit Testing Jest 和 Enzyme 上调用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58429807/