компонент styleled-компонент с именем import выдает ошибку «Тип элемента недопустим: ожидается строка ...» в модульном тесте

Question

Я использую styled-компонент с React. Если я помещу каждый стиль-компонент в отдельный файл и использую экспорт / импорт по умолчанию => без проблем . Однако я хочу поместить группу стилевых компонентов в один файл с именем с именем *1005* , например

// styles.css.js
import styled from 'styled-components';

export const StyledDiv1 = styled.div`
    border: solid 1px red;
`;

export const StyledDiv2 = styled.div`
    ...
`;

export const StyledButton = styled.button`
    ...
`;

....

, и использовать его следующим образом:

// TestComponent.js
import React from 'react';
import { StyledDiv1 } from './styles.css';

const TestComponent = () => <StyledDiv1>test</StyledDiv1>;

export default TestComponent;

Это работает без проблем при запуске приложения, но не удалось при запуске модульного теста. Например, модульный тест с библиотекой реагирующего тестирования, подобной этой

// TestComponent.test.js
import React from 'react';
import { render } from '@testing-library/react';
import TestComponent from './TestComponent';

describe('<TestComponent> tests', () => {
    it('should render component', () => {
        const { getByText } = render(<TestComponent></TestComponent>);

        expect(getByText('test')).toBeInTheDocument();
    });});

, выдаст эту ошибку при запуске теста

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `TestComponent`.

   6 |     it('should render component', () => {
   7 |         // Arrange
>  8 |         const { getByText } = render(<TestComponent></TestComponent>);
     |                               ^
   9 |
  10 |         expect(getByText('test')).toBeInTheDocument();
  11 |     });

  at createFiberFromTypeAndProps (node_modules/react-dom/cjs/react-dom.development.js:26629:21)
  at createFiberFromElement (node_modules/react-dom/cjs/react-dom.development.js:26652:15)
  at reconcileSingleElement (node_modules/react-dom/cjs/react-dom.development.js:15526:23)
  at reconcileChildFibers (node_modules/react-dom/cjs/react-dom.development.js:15586:35)
  at reconcileChildren (node_modules/react-dom/cjs/react-dom.development.js:18089:28)
  at mountIndeterminateComponent (node_modules/react-dom/cjs/react-dom.development.js:18853:5)
  at beginWork$1 (node_modules/react-dom/cjs/react-dom.development.js:20162:16)
  at HTMLUnknownElement.callCallback (node_modules/react-dom/cjs/react-dom.development.js:336:14)
  at invokeEventListeners (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:193:27)
  at HTMLUnknownElementImpl._dispatch (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:119:9)
  at HTMLUnknownElementImpl.dispatchEvent (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:82:17)
  at HTMLUnknownElementImpl.dispatchEvent (node_modules/jsdom/lib/jsdom/living/nodes/HTMLElement-impl.js:30:27)

Попытки:

Я попробовал следующее:

• Обновление @ testing-library / jest-dom и @ testing-library / реагировать на последние.
• Обновление styled-components до последней версии.
• Я пытаюсь создать тест с энзимом и mount / shallow.

, но получил то же самое ошибка. Любую помощь / объяснение приветствуем.

Answer 1

это должен быть js файл, а не css файл

import { StyledDiv1 } from './styles.css';

вы по-прежнему используете его так же, как и вы, стилизованные компоненты - css в js, поэтому файл. css не знает, что с ним делать

edit: я только что заметил, что файл называется styles.css.js. это может что-то сбрасывать, потому что может искать файл. css. попробуйте переименовать его или импортировать все с помощью. js в конце