如何测试纤细的组件答案

【问题标题】：How testing svelte components如何测试纤细的组件
【发布时间】：2021-04-28 13:47:59
【问题描述】：

有一个组件使用了第三方模块我们需要对其进行测试，最好不要制作导入其中的模拟组件。写在这个例子上

// test.spec.ts
import Component from "Component";

describe('Component', () => {
    test('should render component correctly', () => {
        const { container } = render(Component);
        expect(container).toBeTruthy();
    });
});

// error: TypeError: cn is not a function

// ChildComponent.svelte

<script type="ts">
  import cn from 'clsx';
  const class = cn('
    'awesome-class': true
  ');
</script>

<div {class} ></div>



// Component.svelte

<script type="ts">
  import ChildComponent from './ChildComponen';
</script>

<ChildComponent />

jest.config.js looks like this

/// jest.config.js
module.exports = {
    displayName: { name: 'web', color: 'magentaBright' },
    preset: 'ts-jest',
    testEnvironment: 'jsdom',
    testRegex: '\\.spec\\.ts?$',
    coverageDirectory: 'src',
    moduleDirectories: ['node_modules', 'src', '<rootDir>'],

    moduleNameMapper: {
        '^src(.*)$': '<rootDir>/src$1',
        clxs: '<rootDir>/node_modules/clxs',
    },
    transform: {
        '^.+\\.svelte$': ['svelte-jester', { preprocess: true }],
        '^.+\\.js$': 'babel-jest'
    },
    moduleFileExtensions: ['js', 'ts', 'svelte'],
    bail: false,
    verbose: true,
    testTimeout: 3000,
    setupFilesAfterEnv: ['@testing-library/jest-dom/extend-expect'],
};

是否可以在不模拟其他人贬低该组件的情况下测试一个组件？

【问题讨论】：

标签： javascript typescript jestjs svelte testing-library

【解决方案1】：

当然可以。问题是clsx 不是 ESM 模块，因此它不会导出默认值。由于没有default，您需要在tsconfig.json 中启用synthetic default imports。

【讨论】：