Ошибка: «TypeError: ReactWrapper может обернуть только допустимые элементы» при использовании фермента.mount

Question

Я получаю эту ошибку при передаче элемента React в функцию 'mount':

it("Book - move book to a shelf should work", () => {
    let test = (<Book book={book} />);
    let component = mount(test);
    const select = component.find("select").first();
    expect(select).toBeDefined();

Однако, если я удалю переменную и передам элемент непосредственно методу, это сработает.

it("Book - move book to a shelf should work", () => {
    let component = mount(<Book book={book} />);
    const select = component.find("select").first();
    expect(select).toBeDefined();

Чем они отличаются?

ОБНОВЛЕНИЕ: По какой-то причине этот метод (renderer.create от Jest) не жалуется на это:

let component = renderer.create(<Book onMoveBook={onMoveBook} book={book} />);
const tree = component.toJSON(); // Works fine.

ТакжеУдивительно, но преобразование переменной в функцию и передача ее в React.createElement сработало:

var test = React.createElement(() => <Book onMoveBook={onMoveBook} book={book} />);
let component = mount(test);

Answer 1

Была такая же ошибка.Ошибка вызвана тем, как вы монтируете свой тестовый компонент.То, как вы это делаете, вы не монтируете действительный компонент, а просто переменную.Вы хотите поместить свою переменную между < />, чтобы сделать ее компонентом.

Вы делаете let component = mount(test);, в то время как вы должны делать let component = mount(<test/>);

Answer 2

Это может иметь какое-то отношение к фактическому регистру переменных var let test

"с именем в нижнем регистре - это элементы DOM; пользовательские элементы должны начинаться с заглавной буквы" https://github.com/airbnb/enzyme/issues/966

Я пил из пожарного рукава (несколько новичок в ферменте) и вспомнил, что видел этот пост вчера, однако я не на 100% уверен.