Ошибка инвариантного нарушения при тестировании реагирующего компонента, который потребляет пропу из контекста api - PullRequest
Новая
       17

Ошибка инвариантного нарушения при тестировании реагирующего компонента, который потребляет пропу из контекста api

0 голосов
/ 29 октября 2018

Я новичок в шутке и энзимах, и я сталкиваюсь с некоторыми ошибками инвариантного нарушения при тестировании компонента реагирования, который потребляет поддержку из контекста реагирования api. Я знаком с ошибками инвариантного нарушения и их возможными причинами, однако в этом контексте я застрял. Некоторые советы очень ценятся. Вот минимальная настройка кода только для демонстрационных целей. Я бегу
«фермент»: «3,7,0», «энзим-адаптер-реакция-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);
    });

});

Это дает мне следующую ошибку:

Нарушение инварианта: недопустимый тип элемента: ожидается строка (для встроенных компонентов) или класс / функция (для составных компонентов), но получено: undefined. Вы, вероятно, забыли экспортировать свой компонент из файла, в котором он определен, или вы могли смешать импорт по умолчанию и с именами. Проверьте метод визуализации App. 

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

1 Ответ

0 голосов
/ 29 октября 2018

ReactDOM.render(...) не следует оценивать в модульных тестах. Модули неправильно организованы. index.js обеспечивает побочные эффекты, которых следует избегать в модульных тестах, а также имеет ненужную циклическую зависимость с MyComponent.js , которой можно избежать. 

export const MyContext = React.createContext(testValue);

следует перенести в отдельный модуль, чтобы компонентный модуль мог импортировать его напрямую.

...