使用jest vs react-scripts测试

Question

js和react newbie...playing以及测试框架……下面是代码：

    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错误是：

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会抛出这个错误…反应脚本测试对我来说很有意义，因为酶不是jest，告诉我jest很糟糕，还是我在配置jest时做错了什么(通过npm installed....please package.json安装)。

注意:我还没有安装babel……我还不知道它是什么。

谢谢

Answer 1

你自己找到了答案。要使用jest，您的测试需要通过巴别塔让运行者理解react语法。请看一下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命令开箱即用时没有获取测试的原因。

Answer 2

在package.json中更改

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

设置为以下内容：

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

也就是说，不要一开始就改成开玩笑

Answer 3

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