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');
});

反应脚本测试错误：无法从'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');

我不知道为什么玩笑会引发此错误...反应脚本测试对我来说很有意义，因为未安装酶。...请告诉我玩笑是否很烂或者我在配置玩笑时做错了什么（通过安装npm并更新package.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命令，请选中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吗？

使用笑话vs反应脚本测试

3 个答案: