モジュールが見つかりません：エラー： 'ファイル'または 'ディレクトリ'を解決できません

Question

あなたはこの問題の修正を手伝ってください。 2つの.jsxファイルを別のファイルの下にインポートしました。 は、 A.jsx（私はB.jsxをインポートした内部A.jsxを）言うことができます B.jsxファイルの両方が正常に動作している場合、ユニット・テスト・ケースで同じファイルの下に書かれている

。私はそれを分離している瞬間、まだコンポーネントは正常に動作していますが、単体テストケースは実行されていません。

ERROR in ./src/components/thpfooter/index.jsx Module not found: Error: Cannot resolve 'file' or 'directory' ./ThpFooterList in /Users/zi02/projects/creps_ui_components_library/src/components/thpfooter @ ./src/components/thpfooter/index.jsx 9:1725-1751

karma.conf.js

/*eslint-disable*/ 
var webpack = require('karma-webpack'); 
var argv = require('yargs').argv; 
var componentName = "**"; 
if (typeof argv.comp !== 'undefined' && argv.comp !== null && argv.comp !== "" && argv.comp !== true) { 
    componentName = argv.comp; 
} 

var testFiles = 'src/components/'+componentName+'/test/*.js'; 
var mockFiles = 'src/components/'+componentName+'/test/mock/*.json'; 

module.exports = function (config) { 
    config.set({ 
    frameworks: ['jasmine'], 
    files: [ 
     './node_modules/phantomjs-polyfill/bind-polyfill.js', 
     testFiles, 
     mockFiles 
    ], 
    plugins: [webpack, 
       'karma-jasmine', 
       'karma-phantomjs-launcher', 
       'karma-coverage', 
       'karma-spec-reporter', 
       'karma-json-fixtures-preprocessor', 
       'karma-junit-reporter'], 
    browsers: ['PhantomJS'], 
    preprocessors: { 
     'src/components/**/test/*.js': ['webpack'], 
     'src/components/**/*.jsx': ['webpack'], 
     'src/components/**/test/mock/*.json': ['json_fixtures'] 
    }, 
    jsonFixturesPreprocessor: { 
     // strip this from the file path \ fixture name 
     stripPrefix: 'src/components/', 
     // strip this to the file path \ fixture name 
     prependPrefix: '', 
     // change the global fixtures variable name 
     variableName: '__mocks__', 
    // camelize fixture filenames 
    // (e.g 'fixtures/aa-bb_cc.json' becames __fixtures__['fixtures/aaBbCc']) 
     camelizeFilenames: true, 
     // transform the filename 
     transformPath: function (path) { 
     return path + '.js'; 
     } 
    }, 
    reporters: ['spec', 'coverage','junit'], 
    coverageReporter: { 
     dir: 'build/reports/coverage', 
     reporters: [ 
     { type: 'html', subdir: 'report-html' }, 
     { type: 'lcov', subdir: 'report-lcov' } 
     ] 
    }, 
    junitReporter: { 
     outputDir: 'build/reports/coverage/junit/'+componentName, 
     suite: '' 
    }, 

    webpack: { 
     module: { 
     loaders: [{ 
      test: /\.(js|jsx)$/, exclude: /node_modules/, 
      loader: 'babel-loader' 
     }], 
     postLoaders: [{ 
      test: /\.(js|jsx)$/, exclude: /(node_modules|test)/, 
      loader: 'istanbul-instrumenter' 
     }] 
     } 
    }, 
    webpackMiddleware: { noInfo: true } 
    }); 
}; 

footer.jsx

import React from 'react'; 
import ThpFooterList from './ThpFooterList'; 

class ThpFooter extends React.Component { 
    //footer code here 
} 

ThpFooterList.jsx

import React from 'react'; 

class ThpFooterList extends React.Component { 
    //footer list code here 
} 

comの上を参照してくださいと言って、エラーをスローWebPACKのカルマponentは動作していますが、ユニットテストケースを実行することはできません。両方のファイルを1つのファイルに保存すると、footerとfooterlist.jsxを意味します。コンポーネントとユニットテストケースが実行されています。

ユニットテストケースファイル

/* eslint-env jasmine */ 
import React from 'react'; 
import TestUtils from 'react/lib/ReactTestUtils'; 

import ThpFooter from '../index.jsx'; 


describe('ThpFooter',() => { 
    let component; 
    let content; 
    let shallowRenderer; 
    let componentShallow; 

    beforeAll(() => { 
    content = window.__mocks__['thpfooter/test/mock/content']; 
    component = TestUtils.renderIntoDocument(<ThpFooter data={content}/>); 
    shallowRenderer = TestUtils.createRenderer(); 
    shallowRenderer.render(<ThpFooter data={content}/>); 
    componentShallow = shallowRenderer.getRenderOutput(); 
    }); 

    describe('into DOM',() => { 
    it('Should be rendered into DOM',() => { 
     expect(component).toBeTruthy(); 
    }); 

    it('Should have classname as footer-container',() => { 
     const classname = TestUtils.scryRenderedDOMComponentsWithClass(component, 'footer-container'); 
     expect(classname[0].className).toBe('footer-container'); 
    }); 

    it('Should have className as footer-wrapper',() => { 
     const classname = TestUtils.scryRenderedDOMComponentsWithClass(component, 'footer-wrapper'); 
     expect(classname[0].className).toBe('footer-wrapper'); 
    }); 
    }); 

    describe('into shallow renderer',() => { 
    it('Should be rendered as shallow renderer',() => { 
     expect(componentShallow).toBeTruthy(); 

    }); 

    it('Should have classname as footer-container',() => { 
     expect(componentShallow.props.className).toBe('footer-container'); 
    }); 

    it('Should have className as footer-wrapper',() => { 
     expect(componentShallow.props.children.props.children[0].props.className).toBe('footer-wrapper'); 
    }); 
    }); 

}); 

Answer 1

私は開発マシンのいずれかで同じエラーが発生しました。私の場合はgulpとwebpack-streamが使用されていましたが、私はあなたが私のメソッドを参照して解決しようと思うかもしれません。

私のMacでは、すべて問題ありませんが、コードをubuntu開発プラットフォームにプッシュすると、この問題が発生しました。いくつかのグーグルの後、私はそれを解決することはできませんが、私は短くするファイルのパスを作ろうとし、突然それはubuntu開発プラットフォームでも動作します！ファイル名を短くしたり、短いパスに配置したり、動作しているかどうかをテストしたりできます。

Answer 2

大文字と小文字が区別されます。 Macファイルシステムでは大文字と小文字は区別されません。