ReactWrapper :: state（）只能在类组件上调用单元测试Jest和酶

Question

使用玩笑和酶反应进行书写单元测试。在检查组件状态时，它将引发错误“ 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是类component。我的代码没什么错。谁能帮我解决这个问题。预先感谢。

Answer 1

所以您的默认导出

export default withStyles(styles)(CustomerAdd);

导出有关基于类的组件的功能性（HOC）包装。而且，是否要输入类名称和

import CustomerAdd from '../CustomerAdd'

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

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

export class CustomerAdd {
  ...
}

export default withStyles(styles)(CustomerAdd);

在测试中使用命名导入：

import { CustomerAdd } from '../CusomerAdd';

快速解决方案：使用.dive访问基于基础的基于类的组件：

expect(wrapper.find(CustomerAdd).dive().state('addNewOnSubmit')).toEqual(true);

这是一种反模式，因为如果在默认导出中添加任何其他HOC，则需要通过添加适当数量的.dive().dive()....dive()调用来对所有相关测试进行猴子补丁。

长期解决方案：避免测试状态，这是实现细节。

相反，应专注于验证呈现的内容。这样一来，您就可以放心使用各种不同的重构技术，例如用功能组件替换类，重命名状态/实例成员，提升状态，将组件连接到Redux等。