Question

我想了解使用mocha / enzyme设置新的ReactJS测试的分步教程。

这是我遇到的问题和在网上找到的解决方案的列表

目标：尝试使用摩卡和酶为React组件编写一个简单的单元测试

问题：

1. `import React from 'react';` SyntaxError

    1.1 solution: https://stackoverflow.com/questions/35852505/unable-to-import-a-react-component-in-my-mocha-test

2. `shallow(<ComponentForTesting......` 

    2.1 solution: https://github.com/airbnb/enzyme/issues/435

3. `Enzyme Internal Error: Enzyme expects an adapter to be configured, but found none.`

    3.1 solution: https://github.com/wmonk/create-react-app-typescript/issues/185
    3.2 update .babelrc

4. `import * as Enzyme from 'enzyme';` SyntaxError

    4.1 solution: use `import Enzyme from 'enzyme'

5. `import Enzyme from 'enzyme' SyntaxError

    5.1 solution: use `import * as Enzyme from 'enzyme';`

6. create-react-app doesn't go along with jest?????

    6.1 wait what!?

7. removing mocha test altogether

    7.1 Out of the box, Create React App only supports overriding these Jest options:

          • collectCoverageFrom
          • coverageReporters
          • coverageThreshold
          • snapshotSerializers.

现在我只是在圈子里跑步。我只想测试我的组件是否渲染。为什么设置如此困难？

编辑：

还在某些时候删除了package.json.lock和yarn.lock并使用npm install和yarn install进行重建。我忘了我有什么问题.....

EDIT2：

在一次加载图像文件时也遇到了问题，所以我设置了一个testSetup文件

import * as Enzyme from 'enzyme';
import * as Adapter from 'enzyme-adapter-react-16';
Enzyme.configure({ adapter: new Adapter() });

process.env.NODE_ENV = 'production';

// Disable webpack-specific features for tests since
// Mocha doesn't know what to do with them.
require.extensions['.css'] = function () {
  return null;
};
require.extensions['.png'] = function () {
  return null;
};
require.extensions['.jpg'] = function () {
  return null;
};

// Register babel so that it will transpile ES6 to ES5
// before our tests run.
require('babel-register')();

使用Mocha / Jest / Whatever进行React App测试问题

0 个答案: