Я пытался понять это. У меня было много проблем с настройкой Jest в моем проекте React. Ниже приведены мои конфигурации:
webpack.config. js
const path = require('path');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const ip = require('ip');
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'js/bundle.js',
publicPath: '/',
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
},
{
test: /\.scss$/,
exclude: /node_modules/,
loader: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {
modules: true,
},
},
'sass-loader',
],
},
{
test: /\.(jpg|jpeg|png|svg)$/,
loader: {
loader: 'file-loader',
options: {
outputPath: 'images',
name: '[name].[ext]',
},
},
},
],
},
resolve: {
extensions: ['.js', '.scss'],
alias: {
sass: path.resolve(__dirname, 'src/shared/sass'),
src: path.resolve(__dirname, 'src'),
},
},
plugins: [
new CopyWebpackPlugin([{ from: path.resolve('public') }]),
new MiniCssExtractPlugin({ filename: 'css/main.css' }),
],
devServer: {
open: true,
port: 3200,
host: ip.address(),
historyApiFallback: true,
contentBase: path.resolve(__dirname, 'dist'),
stats: 'errors-only',
},
stats: 'errors-only',
};
пакет. json
{
"name": "AdminPortfolio",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"dependencies": {
"@nivo/line": "^0.62.0",
"@nivo/stream": "^0.62.0",
"core-js": "^3.6.5",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-redux": "^7.2.1",
"react-router-dom": "^5.2.0",
"redux": "^4.0.5",
"regenerator-runtime": "^0.13.7"
},
"devDependencies": {
"@babel/core": "^7.11.0",
"@babel/preset-env": "^7.11.0",
"@babel/preset-react": "^7.10.4",
"babel-jest": "^26.2.2",
"babel-loader": "^8.1.0",
"copy-webpack-plugin": "5.1.1",
"css-loader": "^4.2.0",
"enzyme": "^3.11.0",
"enzyme-adapter-react-16": "^1.15.2",
"file-loader": "^6.0.0",
"identity-obj-proxy": "^3.0.0",
"ip": "^1.1.5",
"jest": "^26.2.2",
"mini-css-extract-plugin": "^0.9.0",
"node-sass": "^4.14.1",
"sass-jest": "^0.1.7",
"sass-loader": "^9.0.2",
"webpack": "^4.44.1",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.0"
},
"scripts": {
"start": "webpack-dev-server",
"test": "jest",
"test:watch": "jest --watch",
"test:coverage": "jest --coverage --colors"
}
}
jest.config. js
module.exports = {
// Automatically clear mock calls and instances between every test
clearMocks: true,
// An array of glob patterns indicating a set of files for which coverage information should be collected
collectCoverageFrom: ['src/**/*.{js,jsx,mjs}'],
// The directory where Jest should output its coverage files
coverageDirectory: 'coverage',
// An array of file extensions your modules use
moduleFileExtensions: ['js', 'json', 'jsx', 'scss'],
moduleNameMapper: {
'^sass(.*)$': '<rootDir>/src/shared/sass/$1',
},
transform: {
'^.+\\.scss$': 'sass-jest',
'^.+\\.(js|jsx)$': 'babel-jest',
},
// The paths to modules that run some code to configure or set up the testing environment before each test
setupFiles: ['<rootDir>/enzyme.config.js'],
// The test environment that will be used for testing
testEnvironment: 'jsdom',
// The glob patterns Jest uses to detect test files
testMatch: ['**/__tests__/**/*.js?(x)', '**/?(*.)+(spec|test).js?(x)'],
// An array of regexp pattern strings that are matched against all test paths, matched tests are skipped
testPathIgnorePatterns: ['\\\\node_modules\\\\'],
// This option sets the URL for the jsdom environment. It is reflected in properties such as location.href
testURL: 'http://localhost',
// An array of regexp pattern strings that are matched against all source file paths, matched files will skip transformation
transformIgnorePatterns: ['<rootDir>/node_modules/'],
// Indicates whether each individual test should be reported during the run
verbose: false,
};
Ниже представлен компонент, который я тестирую.
import React from 'react';
import classes from './style';
const PageHeader = ({ header }) => {
return <div className={classes.header}>{header}</div>;
};
export default PageHeader;
Ниже представлен style.s css файл
@import 'sass/theme';
@import 'sass/mix';
.header {
@include withTheme {
color: useValue('c08');
}
font-size: pxtorem(20);
font-weight: 400;
padding-bottom: 35px;
}
И это мой тестовый файл
import React from 'react';
import { shallow } from 'enzyme';
import PageHeader from './index';
const setup = () => {
const props = { header: 'Test' };
const wrapper = shallow(<PageHeader />);
return { props, wrapper };
};
describe('PageHeader Test Suite', () => {
it('Should have a div', () => {
const { wrapper } = setup();
expect(wrapper.find('div').exists()).toBe(true);
});
});
Когда я запускаю тест, я получаю следующую ошибку:
$ jest FAIL src/shared/components/PageHeader/PageHeader.test.js ● Test suite failed to run
Import error in: /Users/raj.prem/Desktop/Random/AdminPortfolio The import "sass/theme" could not be resolved. Searched paths: - /Users/raj.prem/Desktop/Random/AdminPortfolio/sass/_theme.scss
- /Users/raj.prem/Desktop/Random/AdminPortfolio/sass/theme.scss - /Users/raj.prem/Desktop/Random/sass/_theme.scss
- /Users/raj.prem/Desktop/Random/sass/theme.scss - /Users/raj.prem/Desktop/Random/AdminPortfolio/src/shared/components/PageHe
ader/sass/_theme.scss - /Users/raj.prem/Desktop/Random/AdminPortfolio/src/shared/components/PageHe
ader/sass/theme.scss - /Users/raj.prem/Desktop/Random/AdminPortfolio/node_modules/sass-jest/sass/_theme.scss - /Users/raj.prem/Desktop/Random/AdminPortfolio/node_modules/sass-jest/sass/
theme.scss
at Importer.pathLookupError (node_modules/sass-thematic/lib/ast.js:256:12)
at Importer.resolveSync (node_modules/sass-thematic/lib/ast.js:237:16) at importFor (node_modules/sass-thematic/lib/ast.js:317:34)
at File.parse (node_modules/sass-thematic/lib/ast.js:385:11)
at Importer.runSync (node_modules/sass-thematic/lib/ast.js:155:17) at Object.parseSync (node_modules/sass-thematic/lib/ast.js:407:31) at Function.Thematic.parseASTSync (node_modules/sass-thematic/index.js:13:14)
at Object.process (node_modules/sass-jest/transform-sass.js:226:25)
at ScriptTransformer.transformSource (node_modules/@jest/transform/build/Sc
riptTransformer.js:463:35)
at ScriptTransformer._transformAndBuildScript (node_modules/@jest/transform
/build/ScriptTransformer.js:568:40)
Test Suites: 1 failed, 1 totalTests: 0 totalSnapshots: 0 total
Time: 1.306 s
Ran all test suites.
error Command failed with exit code 1.
Похоже на псевдоним используемый в файле s css не может быть разрешен. Может ли кто-нибудь помочь мне настроить это на работу? Тест работает, просто найдите, когда я удаляю стиль из div и удаляю оператор импорта стиля. S css
Спасибо.
EDIT: Или есть способ игнорировать s css, так как я не тестирую никаких стилей. Стили просто используются в компонентах.