ReactWrapper::state() 只能在类组件单元测试 Jest 和 Enzyme 上调用

IT技术 reactjs unit-testing jestjs material-ui enzyme
2021-04-28 20:11:03

使用玩笑和酶在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 是类组件。我不知道我的代码有什么问题。任何人都可以帮助我解决这个问题。提前致谢。

1个回答

所以你的默认导出

export default withStyles(styles)(CustomerAdd);

导出有关基于类的组件的功能（HOC）包装器。如果类名和导入都没有关系

import CustomerAdd from '../CustomerAdd'

是平等的。您的测试导入包装版本，调用后.find(CustomerAdd)返回 HOC 不是您的类。而且您无法使用实例。

短时间解决方案：将类直接导出为命名导出。

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 等）的情况下，您是安全的。

其它你可能感兴趣的问题
上一篇react-native父子通信并返回值 下一篇React autoFocus 属性未呈现