Jest css-modules SyntaxError: Unexpected token
Jest css-modules SyntaxError: Unexpected token
按照他们的 documentation 如何操作后,我已经设置了允许静态文件的笑话,但我仍然收到以下错误。
如何传递和创建快照。
终端错误
FAIL src/components/Splash/Splash.test.js
● Test suite failed to run
/var/www/com/src/components/shared/logo/_Logo.css:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){.logo {
^
SyntaxError: Unexpected token .
3 |
4 |
> 5 | import logo from './_Logo.css';
6 | import * as font from '../font/fontello.css';
Splash.test.js
import { shallow } from 'enzyme';
import { shallowToJson } from 'enzyme-to-json';
import Splash from './Splash';
it('Splash page is rendered', () => {
const result = shallow(
<Splash />,
);
expect(shallowToJson(result)).toMatchSnapshot();
});
Jest 配置
"jest": {
"snapshotSerializers": [
"enzyme-to-json/serializer"
],
"setupTestFrameworkScriptFile": "./node_modules/jest-enzyme/lib/index.js",
"moduleFileExtensions": [
"js"
],
"moduleDirectories": [
"node_modules"
],
"testPathIgnorePatterns": [
"<rootDir>/node_modules/",
"<rootDir>/app/"
],
"moduleNameMapper": {
"moduleNameMapper": {
"\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
"\.(css|less)$": "identity-obj-proxy"
}
},
"transform": {
"^.+\.js$": "babel-jest"
}
}
有一个小错误:moduleNameMapper: {moduleNameMapper{}}
应该只是moduleNameMapper:{}
"moduleNameMapper": {
"\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
"\.(css|less)$": "identity-obj-proxy"
}
从 2018 年 2 月起使用 create-react-app 的人可能会工作。
我部分遵循了文档 jest webpack 以使其工作。
还发现无法在 package.json 中覆盖 moduleNameMapper,但在 jest.config.js 中它可以解决问题。
不幸的是,我还没有找到任何关于它为什么会这样的文档,但这是我的答案。
这是我的 jest.config.js:
module.exports = {
...,
"moduleNameMapper": {
"\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
"\.(scss|sass|css)$": "identity-obj-proxy"
}
}
它可以很好地跳过 scss 文件和@import。
我添加到 devDependencies identity-obj-proxy
按照他们的 documentation 如何操作后,我已经设置了允许静态文件的笑话,但我仍然收到以下错误。
如何传递和创建快照。
终端错误
FAIL src/components/Splash/Splash.test.js
● Test suite failed to run
/var/www/com/src/components/shared/logo/_Logo.css:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){.logo {
^
SyntaxError: Unexpected token .
3 |
4 |
> 5 | import logo from './_Logo.css';
6 | import * as font from '../font/fontello.css';
Splash.test.js
import { shallow } from 'enzyme';
import { shallowToJson } from 'enzyme-to-json';
import Splash from './Splash';
it('Splash page is rendered', () => {
const result = shallow(
<Splash />,
);
expect(shallowToJson(result)).toMatchSnapshot();
});
Jest 配置
"jest": {
"snapshotSerializers": [
"enzyme-to-json/serializer"
],
"setupTestFrameworkScriptFile": "./node_modules/jest-enzyme/lib/index.js",
"moduleFileExtensions": [
"js"
],
"moduleDirectories": [
"node_modules"
],
"testPathIgnorePatterns": [
"<rootDir>/node_modules/",
"<rootDir>/app/"
],
"moduleNameMapper": {
"moduleNameMapper": {
"\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
"\.(css|less)$": "identity-obj-proxy"
}
},
"transform": {
"^.+\.js$": "babel-jest"
}
}
有一个小错误:moduleNameMapper: {moduleNameMapper{}}
应该只是moduleNameMapper:{}
"moduleNameMapper": {
"\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
"\.(css|less)$": "identity-obj-proxy"
}
从 2018 年 2 月起使用 create-react-app 的人可能会工作。 我部分遵循了文档 jest webpack 以使其工作。
还发现无法在 package.json 中覆盖 moduleNameMapper,但在 jest.config.js 中它可以解决问题。 不幸的是,我还没有找到任何关于它为什么会这样的文档,但这是我的答案。 这是我的 jest.config.js:
module.exports = {
...,
"moduleNameMapper": {
"\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
"\.(scss|sass|css)$": "identity-obj-proxy"
}
}
它可以很好地跳过 scss 文件和@import。
我添加到 devDependencies identity-obj-proxy