rspec 测试页面元素_如何开始：使用RSpec，Jest和Enzyme测试Ruby-on-Rails / ReactJS应用

rspec 测试页面元素

I recently made a simple ideas board web app using ReactJS, Ruby-on-Rails and PostgreSQL. Below, I’ll walk you through the initial steps I took to set up basic unit tests for one of the features of my app, adding a new idea.

我最近使用ReactJS，Ruby-on-Rails和PostgreSQL创建了一个简单的想法板Web应用程序。 下面，我将引导您完成为应用程序的功能之一设置基本单元测试所采取的初始步骤，并添加一个新思路。

Note: I’m not going to discuss the scope of tests in this post; rather, my focus is on understanding how to install some of the dependencies in order to be able to get started with writing the tests.

注意：本文不打算讨论测试范围 。 相反，我的重点是理解如何安装一些依赖项 ，以便能够开始编写测试。

背景：创意委员会成立 (Background: ideas board set up)

I used Node package manager to manage my project’s dependencies. If you’d like to code along, you’ll need to make sure you have Node installed on your computer.

我使用Node包管理器来管理项目的依赖项。 如果要一起编码，则需要确保计算机上已安装Node。

Project features

项目特色

In Rails

在Rails中

Models: Idea

型号：想法

Relationships: none

关系：无

In React

在React中

Components: Navbar, IdeasContainer, Idea

组件：Navbar，IdeasContainer，Idea

RSpec入门 (Getting started with RSpec)

I used RSpec to test the Rails part of my ideas board web app. To get started:

我使用RSpec测试了我的创意板网络应用程序的Rails部分。 开始：

1. I added the gem ‘rspec-rails’, ‘~> 3.8’ to my gemfile.
   我在gemfile中添加了gem'rspec-rails'，'〜> 3.8'。

2. I then ran bundle in my terminal window (making sure I was in the Rails directory).

   然后，我在终端窗口中运行了bundle (确保我位于Rails目录中)。

3. Next, in my Rails directory, I created a new folder called spec. And then, another new folder inside that one called requests.

3.接下来，在我的Rails目录中，创建了一个名为spec的新文件夹。 然后，其中的另一个新文件夹称为requests 。

4. I created a new file called ideas_spec.rb. You can replace the name ideas_spec with the name of whichever model you want to test, making sure to include the _spec part to denote that it's a test file.

4.我创建了一个名为ideas_spec.rb的新文件。 您可以将名称ideas_spec替换为要测试的任何模型的名称，并确保包含_spec部分以表示它是测试文件。

5. At the top of my ideas_spec.rb file, I added the following text:

5.在我的idea_spec.rb文件的顶部，添加了以下文本：

require ‘rails_helper’

require 'rails_helper'

6. Then, in the same file, I included code describing the first test I wanted to run:

6.然后，在同一文件中，包含描述我要运行的第一个测试的代码：

describe “add an idea”, :type => :request dodescribe “add an idea”, :type => :request do
before do
 post ‘/api/v1/ideas’
end
it ‘returns a created status’ do
  expect(response).to have_http_status(201)
end
end

7. To run my test, I typed rspec in my terminal window, making sure I was in my rails project directory.

7.要运行测试，我在终端窗口中输入rspec ，以确保我位于我的rails项目目录中。

If you’ve been following along, RSpec should run at this point and your first test should pass!

如果您一直在遵循，RSpec应该在此时运行，并且您的第一个测试应该通过！

Jest入门 (Getting started with Jest)

I was pleasantly surprised to find out that the testing framework Jest is included with create-react-app! However, I also wanted to use Enzyme, a testing utility, for which I needed to install some dependencies.

我惊喜地发现create-react-app中包含了测试框架Jest！ 但是，我还想使用测试实用程序Enzyme，为此我需要安装一些依赖项。

1. To start off, I created a new folder called _tests_ in my app’s src directory.

   首先，我在应用程序的src目录中创建了一个名为_tests_的新文件夹。

2. In my client-side directory, I ran the following commands:
   在我的客户端目录中，运行以下命令：

npm i -D react-test-renderer

npm install --save-dev jest-enzyme

npm install --save-dev enzyme enzyme-adapter-react-16

3. To configure Enzyme, I created a file in src called setupTests.js and included the following:

3.要配置酶，我在src创建了一个名为setupTests.js的文件，并包含以下内容：

const Enzyme = require('enzyme');
const EnzymeAdapter = require('enzyme-adapter-react-16');
Enzyme.configure({ adapter: new EnzymeAdapter() });

4. Inside my _tests_ folder, I created a new file, called App.tests.js

4.在_tests_文件夹中，我创建了一个名为App.tests.js的新文件。

5. I included the following text at the top of this file to import my components and all the testing functionality I wanted for all my tests:

5.我在此文件的顶部包含以下文本，以导入我的组件以及所有测试所需的所有测试功能：

import React from 'react';
import App from '../App';
import Idea from '../components/Idea';
import IdeasContainer from '../components/IdeasContainer';
import { create, update } from 'react-test-renderer';
import '../setupTests';
import { shallow, mount, render } from 'enzyme';
import { shallowToJson } from 'enzyme-to-json';

6. Underneath, I included my first unit test:

6.在下面，我包括了我的第一个单元测试：

describe('Idea', () => {
  it('should render a new idea correctly', () => {
    const output = shallow(
      <Idea
      key="mockKey"
      idea={"1", "Test", "Test"}
      onClick={"mockFn"}
      delete={"mockFn2"}
      />
    );
    expect(shallowToJson(output)).toMatchSnapshot();
  });
});

7. I ran rails s in the server side directory and then npm start in the client side directory to start my ideas board on localhost:3001.

7.我在服务器端目录中运行rails s ，然后在客户端目录中npm start ，以在localhost：3001上启动我的想法板。

8. To run my first test, I typed the following into my terminal window (making sure I was in the client directory):

8.要运行我的第一个测试，我在终端窗口中键入以下内容(确保我位于客户机目录中)：

npm run test

If you’ve been following along, Jest should run at this point, your test should pass — and you’re in a great place now to write more tests!

如果您一直在遵循，那么Jest应该在此时运行，您的测试应该通过-现在您处于一个编写更多测试的好地方！

For more information on the ideas board project, my repo can be found here.

有关想法板项目的更多信息，请在此处找到我的仓库。

If you made it this far, thanks for reading! I hope my post helped you get started with setting up your tests.

如果您已经做到了这一点，感谢您的阅读！ 希望我的帖子可以帮助您开始设置测试。

翻译自: https://www.freecodecamp.org/news/how-to-get-started-testing-a-ruby-on-rails-reactjs-app-with-rspec-jest-and-enzyme-d058f415894e/

rspec 测试页面元素