Question

我有这个组件：

import React from 'react';
import VideoTag from './VideoTag';
import JWPlayer from './JWPlayer';

class VideoWrapper extends React.Component {
//... component code
}

基于某些逻辑呈现内部的另一个组件（VideoTag或JWPlayer），但当我尝试在jest文件中测试它时，我得到错误：

无法找到模块'./VideoTag'

这三个组合在同一个目录中，这就是为什么它实际工作时我在浏览器中看到它并在浏览器中看到它，但看起来Jest在解决这些相对路径时遇到问题，这就是jest文件：

jest.dontMock('../src/shared/components/Video/VideoWrapper.jsx');

import React from 'react';
import ReactDOM from 'react-dom';
TestUtils from 'react-addons-test-utils';

import VideoWrapper from '../src/shared/components/Video/VideoWrapper.jsx';

describe('VideoWrapper tests', () => {
  it('Render JWPlayer', () => {

      let vWrapper = TestUtils.renderIntoDocument(
      < VideoWrapper model={model} />
  );

  });
});

错误在线：

import VideoWrapper from '../src/shared/components/Video/VideoWrapper.jsx';

如何告诉jest如何处理相对路径？

Answer 1

问题不在于路径，它只是在寻找扩展名为.js的模块，在jest配置中添加.jsx之后就可以了：

"moduleFileExtensions": [
  "js",
  "jsx"
]

Answer 2

由于jest使用['js'，'jsx'，'json'，'node']作为默认文件扩展名，因此您无需在配置中为这两个选项添加moduleFileExtensions。（除非你想特别跳过任何选项）

Answer 3

我还必须将moduleNameMapper添加到tsconfig路径映射的jest配置中，以使我的测试能够识别我已设置的路径映射。像这样：

"moduleNameMapper": {
      "^yourPath/(.*)": "<rootDir>\\yourPath\\$1"
    }

希望这会帮助某人！

Answer 4

对于其他在此处尝试将Jest与TypeScript结合使用的人：您需要在ts中加入moduleFileExtensions，例如：

"moduleFileExtensions": [
  "js",
  "jsx",
  "json",
  "node",
  "ts"
]

您还需要*.ts个文件的转换：

transform: {
  "^.+\\.vue$": "vue-jest",
  "^.+\\.js$": "babel-jest",
  "^.+\\.(ts|tsx)$": "ts-jest"
},

Answer 5

就我而言，问题import也区分大小写。检查您的import语句，并确保其与文件名完全匹配！

Jest：找不到要测试的模块内所需的模块（相对路径）

5 个答案: