Reactjs testRegex掩码选择错误的文件来运行测试

2018/07/13更新：

在黑客攻击之后，我找到了

testRegex

不起作用的原因。见我自己的答案贴在下面

---

原始问题：

我正在为我的React.js项目编写测试代码。我正在使用

react脚本

和

enzyme

（我相信这也意味着

jest

）来运行和管理测试。以下是

package.json

文件：

{
  "name": "front",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "~15.5.4",
    "react-dom": "~15.5.4",
    "react-scripts": "0.9.5",
    "redux": "~3.6.0",
    "react-redux": "~5.0.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },
  "devDependencies": {
    "enzyme": "^3.3.0",
    "enzyme-adapter-react-15": "^1.0.6",
    "react-test-renderer": "~15.5.4"
  },
  "jest": {
    "testRegex": "(/abc/.*|(\\.|/)(defg|spec))\\.jsx?$"
  }
}

npm安装后，我检查了版本：

• 反应-scripts@0.9.5
• enzyme@3.3.0
• jest@18.1.0

（是的，我知道我使用的是旧版本的React.js，但这是我现在不能更改的，因为它不是我的个人项目。）

我不明白的是

jest

的

testRegex

没有像我预期的那样工作。目前，我把所有的测试文件都放在

\uuuuuuuuuuuuuuuuuuuuu

文件夹下，并将它们命名为“something.test.js”。但是，如果您查看上面的

testRegex

，首先，它不查找

\uu tests\uu

，而是查找

abc

作为文件夹名，其次，它不查找

test

而是查找

defg

作为文件名

由于上面的配置，我希望我的测试文件根本不会被执行。但是，当我运行npm测试时，测试文件仍然被执行

我做错了什么？

我的一些想法：

• jest@18.1.0

  可能不支持

  testRegex

• 我可能需要通过

  react scripts

  配置

  jest

  ，但它的用户指南似乎显示我可以按照我的方式配置jest（在package.json中放一个“jest”部分）
• 我还尝试使用最新的

  jest

  v23.3，但它仍然没有像我预期的那样工作
• 我知道

  testMatch

  ，但是文档上说，所以我假设如果我在

  package.json

  中指定了

  testRegex

  ，则会忽略

  testMatch

  。这是真的吗

试试这个： 创建一个名为jest.config.js的单独文件

module.exports = {

  coverageDirectory: "coverage",

  moduleFileExtensions: [
   "ts",
   "tsx",
   "js"
  ],

  testEnvironment: "node",

  testRegex: "(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$",

};

试试这个： 创建一个名为jest.config.js的单独文件

module.exports = {

  coverageDirectory: "coverage",

  moduleFileExtensions: [
   "ts",
   "tsx",
   "js"
  ],

  testEnvironment: "node",

  testRegex: "(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$",

};

---

经过黑客攻击，我意识到这是因为如果您使用（注意，它是指向标签

v0.9.5

）运行旧版本或最新版本的测试，

testRegex

无法被覆盖（在我发布此答案时，

react scripts

的最新版本是

1.1.4

）

这里有更多的细节

在我上面的原始问题中，我使用了。当我运行

CI=true npm test

来运行测试时，实际运行的是。这是一个包装器脚本，最终仍然调用

jest

。在中，它创建Jest配置并作为其

--config

选项传递到

Jest

：

argv.push('--config', JSON.stringify(createJestConfig(
  relativePath => path.resolve(__dirname, '..', relativePath),
  path.resolve(paths.appSrc, '..'),
  false
)));

跟踪中的

createJestConfig

函数，您将看到它创建了一些Jest配置项，并将它们作为JavaScript对象返回

因此，

jest

（我使用的是

18.1.0

）最终使用一个带有字符串化JSON字符串的

--config

选项运行

如果您追踪

jest.run

，最终会找到（这是指向

v18.1.0

的链接）来读取配置，并且此

readConfig

函数是

然后让我们看看

jest-config

模块。上述

readConfig

在中定义

readConfig

函数调用

readRawConfig

，然后通过调用

setFromArgv

包含从

argv

设置的配置：

const readConfig = (argv: any, packageRoot: string) =>
  readRawConfig(argv, packageRoot)
    .then(config => Object.freeze(setFromArgv(config, argv)));

下面是

readRawConfig

实现，其中包含我的注释（前面带有“ywen”），说明了这些行的作用：

const parseConfig = argv => {
  if (argv.config && typeof argv.config === 'string') {
    // If the passed in value looks like JSON, treat it as an object.
    if (argv.config[0] === '{' && argv.config[argv.config.length - 1] === '}') {
      return JSON.parse(argv.config);
    }
  }
  return argv.config;
};

const readRawConfig = (argv, root) => {
  // [ywen]
  // Calls the `parseConfig` above. Remember that react-scripts's
  // test.js passes in the configuration as a stringified JSON
  // string, so the "If the passed in value looks like JSON..."
  // test is met. The stringified JSON string is read and parsed
  // back to a JavaScript object, returned, and stored in the
  // rawConfig variable.
  const rawConfig = parseConfig(argv);

  if (typeof rawConfig === 'string') {
    return loadFromFile(path.resolve(process.cwd(), rawConfig));
  }

  if (typeof rawConfig === 'object') {
    // [ywen]
    // Because `rawConfig` is a JS object, this if branch is
    // executed. The function returns with the normalized
    // configuration, so the `loadFromPackage` function, which
    // reads the `jest` configuration from the `package.json`,
    // is **NOT** called.
    const config = Object.assign({}, rawConfig);
    config.rootDir = config.rootDir || root;
    return Promise.resolve(normalize(config, argv));
  }

  return loadFromPackage(path.join(root, 'package.json'), argv).
  then(config => {
    console.log('package.json config: ', config);
    config || normalize({ rootDir: root }, argv)
  });
};

使用argv上提供的配置覆盖配置，但

testRegex

不是其中之一

如果您在命令行上提供自己的

--config

，例如

CI=true npm test--config./jest.config.js/path/to/your/test/file.js

，将有两个

--config

项添加到传递给jest的

argv

中：一个由您提供，另一个是（秘密的）由react脚本的

createJestConfig

创建。它们在

argv.config

中分组为一个列表：

  config: 
   [ './jest.config.js',
     '{"collectCoverageFrom":["src/**/*.{js,jsx}"],...'
   ],

当

readRawConfig

调用

parseConfig

时，

if（argv.config&&typeof argv.config=='string'）{

测试失败，因为传入的值是一个列表，而不是字符串。因此，

parseConfig

按原样返回此列表。此列表随后存储在

rawConfig

中。

rawConfig

的类型仍然是

object

。但在

const-config=object.assign（{}，rawConfig）行中；

，它被转换为如下内容：

{ '0': './jest.config.js',
  '1': '{"collectCoverageFrom":["src/**/*.{js,jsx}"], ...
}'

最终将在失败，因为

0

或

1

不是有效的Jest配置

因此，当使用

react脚本v0.9.5

时，其

test

脚本不支持自定义

testRegex

---

在撰写本文时的最新版本

react scripts v1.1.4

中仍然是这样。它允许，但

testRegex

仍然不是其中之一。

经过黑客攻击后，我意识到这是因为

testRegex

如果使用（注意，它是指向标签

v0.9.5

）的链接，用于运行旧版本或最新版本的测试（在我发布此答案时，

react scripts

的最新版本为

1.1.4

）

这里有更多的细节

在上面的原始问题中，我使用了。当我运行

CI=true npm test

来运行测试时，实际运行的是。这是一个包装器脚本，最终仍然调用

jest    ├── abc/ 
    │  │__tests__/
    │    ├── login.spec.js # test
    │    └── anything.txt # not test
    │    └── method.test.js # test
    │
    ├── package.json # not test
    ├── server.js # not test
    └── jest.config.js # not test (this your jest config)