Ошибка инвариантного типа при использовании Jest mount - PullRequest
Новая
       34

Ошибка инвариантного типа при использовании Jest mount

0 голосов
/ 03 апреля 2019

Итак, у меня есть React Class, назовем его A. Я провожу на нем шутливый тест, но продолжаю получать

Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

в React Class I 'я делаю: export class A extends Component ..

В файле теста jest я делаю: import { A } from './A.js'

при запуске: const wrapper = mount(<A />)

Я получаю ошибку выше.Я бегу в среде jsdom для шутки.Я в растерянности, почему это не сработает.Я читал, что некоторые люди экспортируют по умолчанию, но я не понимаю, почему не следует выполнять правильный импорт имен.У кого-нибудь есть идеи, в чем может быть проблема?

реальный код: jest файл: 

import Adapter from 'enzyme-adapter-react-16';
import Enzyme, { shallow, mount } from 'enzyme';
import React from 'react';

import { A } from '../A';

Enzyme.configure({ adapter: new Adapter() });

/**
 * Test Suite
 */
describe('A test', () => {
 it('calls componentDidMount', () => {
   const wrapper = mount(<A />);
 })
})

реагирует класс: 

import React, { Component } from 'react';
import PropTypes from 'prop-types';

export class A extends Component {
...
}

jest config: 

module.exports = {
    clearMocks: true,

    // The directory where Jest should output its coverage files
    coverageDirectory: 'coverage',

    // The test environment that will be used for testing
    testEnvironment: 'jsdom',
    testURL: 'http://localhost/',

    // Directory to search for tests
    roots: ['src/'],

    // The glob patterns Jest uses to detect test files
    testMatch: [
        '**/__tests__/**/*.[jt]s?(x)',
        '**/?(*.)+(spec|test).[tj]s?(x)'
    ],

    // An array of regexp pattern strings that are matched against all test paths, matched tests are skipped
    testPathIgnorePatterns: [
        '/node_modules/'
    ],

    snapshotSerializers: [
        'enzyme-to-json/serializer'
    ]
};

Ответы [ 2 ]

1 голос
/ 04 апреля 2019

Это ошибка, которая появляется при попытке отобразить Object как Component.

Вот пример:

A.js 

import * as React from 'react';

const AnObject = {};  // <= NOT a component

export class A extends React.Component {
  render() {
    return (<AnObject/>);  // <= Attempt to render an object as a component
  }
}

A.test.js 

import * as React from 'react';
import { mount } from 'enzyme';

import { A } from './A';

test('A', () => {
  const wrapper = mount(<A/>);  // <= Fails with "Invariant Violation: Element type...
});

..., которая выдает следующую ошибку:

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

Проверьте метод рендеринга A. 

  5 | 
  6 | test('A', () => {
> 7 |   const wrapper = mount(<A/>);
    |                   ^
  8 | });
  9 |

Вы захотите проверить A в точке теста и убедиться, что это действительно ваш компонент.

Затем работайте задом наперед и убедитесь, что все, что отображается как компонент с помощью A, действительно является компонентом (и т. Д.), Пока не найдете некомпонент, который используется в качестве компонента.

0 голосов
/ 03 апреля 2019

LayoutGroup не является экспортом по умолчанию

Вы не можете вызвать LayoutGroup через import { A } from '../A';, он не экспортируется по умолчанию, поэтому вы не можете переименовать его в именованный импорт.

Чтобы что-то сделатькак это изменение

import { A } from './A.js'

на

import A from './A.js'

и

export class LayoutGroup extends Component {

до

export default class LayoutGroup extends Component {

...