在使用Jest单元测试React组件时如何模拟子组件

Question

我有一个React组件,我试图编写一些测试.我把它分解为最简单的测试.

jest.dontMock('../Overlay.react.js');

import React from 'react';
import ReactDOM from 'react-dom';

var Overlay = require('../Overlay.react.js'); // this is the culprit!

describe('Overlay', () => {
    it('should work', () => {
        expect(true).toEqual(true);
    });
});

当我要求测试的组件时,它似乎不是在嘲笑它的子组件.在顶部Overlay.react.js,我有以下导入:import LoadingSpinner from 'loadingIndicator/LoadingIndicatorSpin.react'; 运行我的测试时,我收到以下错误:

• SyntaxError:/Users/dev/work/react-prototype/src/components/root/routes/components/subset1/components/Overlay.react.js:/ Users/dev/work/react-prototype/src/components/root/routes/components/loadingIndicator/LoadingIndicatorSpin.react.js:/Users/dev/work/react-prototype/src/components/root/routes/components/loadingIndicator/sass/style.sass:Unexpected token ILLEGAL

它似乎不是模拟组件,而是直接到子组件的sass文件并抛出适合.我的理解是,除了你告诉它不要嘲笑之外,Jest嘲笑一切.

制定这些测试的正确方法是什么,以便在测试期间导入时子组件不会引起爆炸？

Answer 1

如果您需要在主组件中而不是在每个子组件中使用 SASS、LESS 和 CSS 文件，那么当您单独测试组件时就不会遇到此问题。

如果您不喜欢我提供的解决方案，本问题报告中还提到了一些其他解决方案。第334期