Ruby、Rails和JS环境的先决条件
以下是我在本教程中使用的工具。
$> ruby --version
=> 3.1.2
$> rails --version
=> 7.0.3.1
$> node --version
=> 18.6.0
$> yarn --version
=> 1.22.19
创建新的Rails应用程序--还没有JavaScript
$> rails new myapp && cd myapp
现在等一下......好吧！你现在有一个新的默认Rails应用程序。
添加最基本的文件
创建一个控制器，如下所示app/controllers/welcome_controller.rb
# inside app/controllers/welcome_controller.rb
class WelcomeController < ApplicationController
end
在config/routes.rb中配置一个默认路由，如下所示
# inside config/routes.rb
Rails.application.routes.draw do
get "welcome/index"
root to: "welcome#index"
end
在里面添加一个视图app/views/welcome/index.html.erb
<!-- inside app/views/welcome/index.html.erb -->
<h1>Hello !<h1>
添加并使用一个ES6模块
创建一个ES6模块，在下面创建一个新文件app/javascript/magicAdd.js
// inside app/javascript/magicAdd.js
const magicAdd = (a, b) => {
return a + b;
}
export default magicAdd;
并从主包中引用该文件。
// inside app/javascript/packs/application.js
// You can left pre-existing JavaScript, that's ok :)
import magicAdd from './magicAdd.js'
let a = magicAdd(2, 4);
console.log(`From mainjs, magicAdd result is ${a}`)
停止你的本地Web服务器，并运行
$/myapp> bin/rails server
如果没有显示错误，你可以运行本地Web服务器。
$/myapp> bin/rails s
现在打开你的浏览器，检查浏览器的控制台，看是否一切正常。
为JavaScript模块创建一个测试
在里面创建一个新文件test/javascript/magicAdd.spec.js
// inside test/javascript/magicAdd.spec.js
import magicAdd from 'magicAdd.js'
describe('magicAdd', () => {
test('add two numbers', () => {
// given
let result = 0;
// when
result = magicAdd(1, 3)
// then
expect(result).toEqual(4);
});
});
添加JavaScript的依赖性来运行单元测试
我们现在需要。
jest，这就是我们的测试框架。@babel/preset-env和 ，因为使用的是ES6。babel-jestistanbul-reports来获得一份漂亮的代码覆盖率报告。
因此，让我们运行
$/myapp> yarn add --dev @babel/preset-env babel-jest jest istanbul-reports
配置Jest
打开package.json，它应该看起来像这样。
{
"devDependencies": {
"@babel/preset-env": "^7.18.10",
"babel-jest": "^28.1.3",
"istanbul-reports": "^3.1.5",
"jest": "^28.1.3"
}
}
在package.json中添加以下属性，这样Jest就能知道哪些目录和文件需要关注，哪些需要忽略。
{
// all properties as above remain the same...
"devDependencies": {
"@babel/preset-env": "^7.18.10",
"babel-jest": "^28.1.3",
"istanbul-reports": "^3.1.5",
"jest": "^28.1.3"
},
// add the following property to package.json
"jest": {
"testPathIgnorePatterns": [
"node_modules/",
"config/webpack/test.js",
"vendor/bundle/ruby"
],
"moduleDirectories": [
"node_modules",
"app/javascript"
],
"collectCoverage": true,
"coverageReporters": [
"text",
"html"
],
"coverageDirectory": "coveragejs"
}
用你的Rails应用程序配置babel
在你的Rails项目的根部，在babel.config.js ，添加以下代码。
module.exports = {
presets: ["@babel/preset-env"],
};
启动测试
这是个重要时刻。
运行
$/myapp> yarn jest
**yarn run v1.22.19**
**PASS** **test/javascript/****magicAdd.spec.js**
**magicAdd**
**✓** **add two numbers (2 ms)**
**-------------|---------|----------|---------|---------|-------------------**
**File | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s**
**-------------|---------|----------|---------|---------|-------------------**
**All files** **|** **100** **|** **100** **|** **100** **|** **100** **|**
**magicAdd.js** **|** **100** **|** **100** **|** **100** **|** **100** **|**
**-------------|---------|----------|---------|---------|-------------------**
**Test Suites:** **1 passed****, 1 total**
**Tests:** **1 passed****, 1 total**
**Snapshots:** **0 total**
**Time:** **0.656 s**
**Ran all test suites.**
**✨ Done in 1.54s.**
并在浏览器中打开 coveragejs/index.html 以获得覆盖率。
摘要
这并不复杂，但和npm项目一样，你必须按照正确的顺序来处理依赖关系和插入libs。从这样一个简单的例子开始了解事情是如何进行的，我们希望这对你有帮助!
