使用 jest 与 react-scripts 测试

Question

js 和反应新手...玩测试框架...这是代码：

    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 测试错误是：Cannot find module 'enzyme' from '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（通过 npm 和更新安装）时做错了什么包.json）。

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

谢谢

Answer 1

你自己得出了答案。要使用jest你的测试，需要通过 babel 来让运行者理解 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命令，请检查此处。

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

Answer 2

在 package.json 更改

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

到以下几点：

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

即首先不要变成开玩笑