使用 jest vs react-scripts 测试答案

【问题标题】：using jest vs react-scripts test使用 jest vs react-scripts 测试
【发布时间】：2019-04-18 17:50:31
【问题描述】：

js 和 react 新手...玩弄测试框架...这里是代码：

    import React from 'react';
  //  import CheckboxWithLabel from '../CheckboxWithLabel';
    import {shallow} from 'enzyme'; //not installed...

    //var x = require ('../CheckboxWithLabel.js');


    test('CheckboxWithLabel changes the text after click', () => {
  const checkbox = shallow(
    <CheckboxWithLabel labelOn="On" labelOff="Off" />
  );
  expect(checkbox.text()).toEqual('Off');
  checkbox.find('input').simulate('change');
  expect(checkbox.text()).toEqual('On');
});

react-scripts 测试错误是：无法从“checkboxWithLabel-test.js”中找到模块“酶”

虽然开玩笑的错误是：

Jest encountered an unexpected token

    SyntaxError: /Users/shriamin/Development/js_prj_react_django_etc/jest_react_demo/my-app/src/__tests__/checkboxWithLabel-test.js: Unexpected token (12:4)

      10 |  test('CheckboxWithLabel changes the text after click', () => {
      11 |   const checkbox = shallow(
    > 12 |     <CheckboxWithLabel labelOn="On" labelOff="Off" />
         |     ^
      13 |   );
      14 |   expect(checkbox.text()).toEqual('Off');
      15 |   checkbox.find('input').simulate('change');

我不知道为什么 jest 会抛出这个错误……react-scripts 测试对我来说很有意义，因为没有安装酶……请告诉我 jest 是不是很糟糕，或者我在配置 jest 时做错了什么（通过安装npm 并更新 package.json)。

注意：我没有安装 babel...我还不知道那是什么。

谢谢

【问题讨论】：

我没有安装 babel - 你不必这样做，这就是 react-scripts (create-react-app) 本身所做的。这可能应该是 checkboxWithLabel-test.jsx 而不是 checkboxWithLabel-test.js
此脚本存在多个问题。对我来说，处理它们的顺序似乎并不直观。是的，如何定义 CheckboxWithLabel 存在第二个问题，但是顶部缺少的酶模块似乎具有优先权。我想我只是不明白...
Jest 很棒，但配置不正确。该错误意味着 JSX 语法没有被转译。我无法理解这个案子。你是怎么想出像这样的故障设置的？ create-react-app 应该使用开箱即用的 react-scripts 生成设置。它已经使用 Jest。如果您尝试在 react-scripts 之外设置 Jest，则不应这样做。
有这样做的理由吗？ react-scripts 基本上是预配置的设置，这包括预配置的 Jest。 react-scripts test 使用特定配置运行 jest。当你直接运行jest 时，它缺少所需的配置。
我认为这是一个教程，并不意味着您已经在使用 CRA。如果它暗示了这一点，我会说那是非常糟糕的教程。

标签： reactjs jestjs

【解决方案1】：

这里描述的错误似乎是没有解释的jsx，你的测试文件扩展名不是js而不是jsx吗？

【讨论】：

这似乎是一个疯狂的猜测，你应该问 OP 文件扩展名是什么
为什么狂野？错误出现在 jsx 标记的开头“
如果您不确定，您应该先发表评论询问文件扩展名。我在通过 SO 审查队列时遇到了你的答案，“也许”这个词让我做出了这种反应。我认为答案不应该包含诸如答案之类的猜测

【解决方案2】：

您自己得出了答案。要使用jest，你的测试需要通过 babel 让运行者理解反应语法。查看babel-doc 以更详细地了解它。它只是一个转换工具，可以将花哨的语法转换成 javascript 可以理解的东西。安装以下插件和预设。

预设

npm i --save @babel/preset-env
npm i --save @babel/preset-react

插件

npm install --save babel-plugin-transform-export-extensions

在您的 .babelrc 中添加以下行：

{
  "env": {
    "test": {
      "presets": [
        "@babel/preset-env",
        "@babel/preset-react"
      ],
      "plugins": [
        "transform-export-extensions",
      ],
      "only": [
        "./**/*.js",
        "node_modules/jest-runtime"
      ]
    }
  }
}

现在尝试从您的项目目录在命令行上运行 jest，以确保您的测试配置正确。

react-scripts 是一组预配置的命令，与 create-react-app 一起出现，如果您想使用它而不是 jest 命令，请检查 here。

react-scripts 期望您的测试文件夹位置遵循certain convention。这可能是当 react-scripts test 命令开箱即用时没有获取测试的原因。

【讨论】：

首先是一个令人困惑的问题......看来玩笑需要 babel 才能工作

【解决方案3】：

在 package.json 中更改

 "scripts": {
    "test": "jest",
  },

到以下：

 "scripts": {
    "test": "react-scripts test",
  },

即一开始就不要开玩笑了

【讨论】：

我发现了这个 (stackoverflow.com/questions/35756479/…) 它告诉我如何解决导入/导出和玩笑的问题
谢谢，'react-scripts test' 在内部使用 Jest 吗？
问题是关于使用一个与另一个。 “不要使用另一个”没有提供信息。