Jest разбивается в модуле, который никогда не импортируется для теста

Question

Я никак не могу понять, почему это происходит, и это явно как-то связано с тем, как jest загружает компоненты для тестирования, когда он пытается собрать все компоненты, найденные в файле index.js, а затем все компоненты импортированы. к этому компоненту, а затем ко всем компонентам, с которыми эти компоненты совместно используют файл index.js. Но почему это происходит, я не могу понять, потому что это не то, как именованные экспорты определены в ES6, и это также делает чрезвычайно трудным на самом деле компоненты модульного тестирования, поскольку они никогда не загружаются изолированно. И необходимость рефакторинга всей нашей кодовой базы, чтобы иметь возможность запускать тесты, когда в prod все работает нормально, кажется крайней мерой, которую мы просто не можем go сделать. Кто-нибудь может помочь?

Примечание: для ясности - дело не в ошибке undefined is not allowed for styled tag type., а в том, как ее исправить - проблема в том, что эта ошибка появляется в модуле, который никогда не используется в тестируемом компоненте. во-первых, ни в тесте - и, следовательно, ошибка не должна появляться в этом тесте.

~ / TestComponent. vue

  <p>Test</p>
</template>

<script>
export default {
  name: "test-component",
};
</script>

~ / __ tests __ / TestComponent.spe c. js

import { shallowMount, createLocalVue } from '@vue/test-utils';
import Vuex from 'vuex';

const localVue = createLocalVue();

localVue.use(Vuex);

describe("TestComponent.vue", () => {
    it('works', () => {
        const wrapper = shallowMount(TestComponent);
        expect(wrapper).toMatchSnapshot();
    })
})

~ / index. js

export { default as TestComponent } from './TestComponent.vue';
export { default } from './SearchScreen.vue';

Результат теста:

  ● Test suite failed to run

    undefined is not allowed for styled tag type.

      83 |   `}
      84 | `;
    > 85 | const StyledBacknavigation = styled(MainNav)`
         |                              ^
      86 |   ${({ theme: { mainMenu } }) => css`
      87 |     font-family: ${mainMenu.fontFamily};
      88 |   `}

      at styled (node_modules/vue-styled-components/lib/constructors/styled.js:21:13)
      at Object.<anonymous> (resources/assets/js/fragments/MainMenu/MainMenu.components.js:85:30)
      at Object.<anonymous> (resources/assets/js/fragments/MainMenu/index.js:1:1)
      at Object.<anonymous> (resources/assets/js/components/Layout/SoHeader.components.js:10:1)
      at resources/assets/js/components/Layout/SoHeader.vue:35:1
      at Object.<anonymous> (resources/assets/js/components/Layout/SoHeader.vue:116:3)
      at Object.<anonymous> (resources/assets/js/components/Layout/index.js:3:1)
      at Object.<anonymous> (resources/assets/js/components/index.js:21:1)
      at Object.<anonymous> (resources/assets/js/fragments/FeaturedList/FeaturedList.components.js:1:1)
      at Object.<anonymous> (resources/assets/js/fragments/FeaturedList/index.js:1:1)
      at Object.<anonymous> (resources/assets/js/fragments/index.js:1:1)
      at Object.<anonymous> (resources/assets/js/screens/SearchScreen/SearchScreen.components.js:1:1)
      at Object.<anonymous> (resources/assets/js/screens/SearchScreen/index.js:1:1)
      at Object.<anonymous> (resources/assets/js/screens/SearchScreen/__tests__/TestComponent.spec.js:1:1)