测试反应组件期间的不变违规错误，该组件使用来自上下文的 prop api

Question

我是 jest 和 enzyme 的新手，在测试从 react 上下文 api 消耗道具的 react 组件时，我运行遇到了一些不变违规错误。我熟悉 Invariant Violation 错误及其可能的原因，但是，在这种情况下我被困住了。非常感谢一些建议。这是仅用于演示目的的最小代码设置。我是运行
"enzyme": "3.7.0", "enzyme-adapter-react-16": "1.6.0",
"jest": "23.6.0".

请注意，下面的代码工作正常，但是，只有当我尝试测试 MyComponent.jsx 时才会出现问题。

index.jsx

import * as React from 'react';
import ReactDOM from 'react-dom';
import MyComponentWithContext from "./MyComponent";

const testValue = 'test value';

export const MyContext = React.createContext(testValue);

const App = () => {
    return (
        <div>
            <MyComponentWithContext/>
        </div>
    )
}

ReactDOM.render(
    <MyContext.Provider value={testValue}>
        <App/>
    </MyContext.Provider>,
    document.getElementById('root') || document.createElement('div')
)

MyComponent.jsx

import * as React from 'react';
import {MyContext} from './';

export class MyComponent extends React.Component {
    constructor(props) {
        super(props)
    }
    getContextValue() {
        return this.props.testValue
    }
    render() {
        return <div>{this.getContextValue()}</div>;
    }
}

const MyComponentWithContext = () => (
    <MyContext.Consumer>
        {testValue => <MyComponent testValue={testValue}/>}
    </MyContext.Consumer>
)

export default MyComponentWithContext;

当我尝试像这样测试 MyComponent 时：

MyComponent.unit.test.js

import React from 'react';
import {shallow} from 'enzyme';
import {MyComponent} from '../MyComponent';

describe('<MyComponent />', () => {
    const testValue = 'test value';
    it('should return test value', () => {
        const wrapper = shallow(<MyComponent testValue={testValue}/>);
        expect(wrapper.instance().getContextValue()).toEqual(testValue);
    });

});

这给了我以下错误：

不变违规：元素类型无效：应为字符串（对于内置组件）或 class/function（对于复合组件）但得到：未定义。您可能忘记从定义它的文件中导出您的组件，或者您可能混淆了默认导入和命名导入。检查 App.

的渲染方法

| ReactDOM.render(
         |          ^
      18 |     <MyContext.Provider value={testValue}>
      19 |         <App/>
      20 |     </MyContext.Provider>,

Answer 1

ReactDOM.render(...) 不应在单元测试中进行评估。模块组织不当。 index.js 提供了在单元测试中应该避免的副作用，它还与 MyComponent.js 有不必要的循环依赖，可能避免。

export const MyContext = React.createContext(testValue);

应该移到单独的模块中，以便组件模块可以直接导入它。

测试反应组件期间的不变违规错误，该组件使用来自上下文的 prop api

Invariant Violation error during testing react component which consumes prop from context api

reactjs

jestjs

enzyme

react-context