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：   意外的令牌ILLEGAL

似乎不是嘲笑组件，而是直接转到子组件的sass文件并抛出一个合适的东西。我的理解是Jest嘲笑除了你告诉它的所有内容 not mock。

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

Answer 1

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

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

如何在使用Jest

1 个答案: