РЕДАКТИРОВАТЬ: В последней версии jsdom есть некоторые критические изменения, поэтому может потребоваться убедиться, что версия не выше 9.11.0. По сути, перейдите в файл package.json и измените строку для jsdom на "jsdom": "9.11.0".

Я действительно хочу, чтобы все разработчики React знали, что настройка тестов для React - это самое простое дело в жизни!

Мы будем использовать образец приложения, который я создал в одном из моих предыдущих постов. Щелкните здесь, чтобы получить образец приложения, или прочтите Простая установка приложения React, чтобы сделать это самостоятельно.

Введение

Если вы уже хорошо понимаете, что это за модули (Mocha, Expect и Enzyme), вы можете перейти к следующему разделу (Настоящая сделка).

Для новичков (даже старичков), которые не знакомы с этими модулями, я хотел бы сделать обзор. Mocha - это среда тестирования Javascript. Среды тестирования используются для организации и выполнения тестов. Ниже приведен пример того, что позволяет вам делать среда тестирования.

describe('my code must work', () => {
  it ('should work', () => {
    
  })
  it ('should not work', () => {
    
  })
})

Альтернативы использованию Mocha: Jest, Jasmine, AVA, QUnit, Tape и т. Д. Mocha, как и некоторые другие тестовые фреймворки, не имеет библиотеки утверждений из коробки, поэтому нам нужен один . Библиотеки утверждений - это инструменты, которые используются для проверки правильности. В этом руководстве я буду использовать Expect. Другие библиотеки утверждений включают Chai, assert, should, YUIPort, JShould и т. д. Ниже приведен пример того, что библиотека утверждений выполняет (в данном случае Expect).

user = {firstName: 'Kayode', lastName: 'Adeniyi'}
expect(user.firstName).toEqual('Kayode')
=> true

Для тестирования React нам также понадобится вспомогательная библиотека. Вспомогательная библиотека Facebook для тестирования реакции - React Test Utils, но она слишком многословна. Я решил использовать Enzyme, проект Airbnb с открытым исходным кодом. Фермент - это просто абстракция. За сценой он использует React Test Utils, JSDOM и Cheerio.

Кроме того, я буду использовать тестовую среду в памяти JSDOM. Другие варианты - протестировать в браузере или в автономном браузере.

Вкратце, план изложен ниже.

Что тестировать: компоненты React

Как: Mocha + Expect + Enzyme

Где: DOM в памяти через JSDOM

Настоящая сделка

Если вы выполнили приведенную выше инструкцию, у вас должен быть настроен образец приложения, которое мы можем протестировать. Ниже приведен снимок экрана, на котором должна выглядеть ваша структура папок.

Обратите внимание, что нам нужны react-addons-test-utils, потому что энзим использует его под капотом.

Начнем приключение с бега

npm install --save-dev mocha expect enzyme jsdom react-addons-test-utils

Создайте тестовый файл конфигурации, запустив

touch testSetup.js

затем скопируйте и вставьте приведенный ниже код. Я добавил комментарии, которые помогают понять, что происходит

// This file is written in ES5 since it's not transpiled by Babel.
/* This file does the following:
 1. Sets Node environment variable
 2. Registers babel for transpiling our code for testing
 3. Disables Webpack-specific features that Mocha doesn't understand.
 4. Requires jsdom so we can test via an in-memory DOM in Node
 5. Sets up global vars that mimic a browser.
This setting assures the .babelrc dev config (which includes
 hot module reloading code) doesn't apply for tests.
 But also, we don't want to set it to production here for
 two reasons:
 1. You won't see any PropType validation warnings when
 code is running in prod mode.
 2. Tests will not display detailed error messages
 when running against production version code
*/
process.env.NODE_ENV = 'test'
// Register babel so that it will transpile ES6 to ES5 before our tests run.
require('babel-register')()
// Disable webpack-specific features for tests since
// Mocha doesn't know what to do with them.
require.extensions['.css'] = function () {return null}
// Configure JSDOM and set global variables
// to simulate a browser environment for tests.
var jsdom = require('jsdom').jsdom
var exposedProperties = ['window', 'navigator', 'document']
global.document = jsdom('')
global.navigator = { userAgent: 'node.js' }
global.window = document.defaultView
Object.keys(document.defaultView).forEach((property) => {
  if (typeof global[property] === 'undefined') {
    exposedProperties.push(property)
    global[property] = document.defaultView[property]
  }
})
documentRef = document

Затем давайте обновим скрипт npm, который будет запускать наш тест. Откройте файл package.json и замените тестовый скрипт приведенным ниже кодом.

"test": "mocha --reporter spec testSetup.js \"components/*.spec.js\""

Формат для написания нашего теста будет заключаться в создании тестового файла в той же папке, что и компонент, который мы хотим протестировать.

Давайте создадим наш файл HelloWorld.spec.js в папке, где у нас есть HelloWorld.js. Запустите приведенный ниже код, чтобы создать его

touch components/HelloWorld.spec.js

Вы можете назвать свой файл HelloWorld.test.js, но не забудьте изменить его в тестовом скрипте вашего package.json.

Затем скопируйте и вставьте код ниже

import React from 'react'
import expect from 'expect'
import { shallow, mount } from 'enzyme'
import HelloWorld from './HelloWorld'
const wrapper = shallow(<HelloWorld />)
describe('HelloWorld Component', () => {
  it('renders h1', () => {
    expect(wrapper.find('h1').text()).toEqual('Hello World')
  })
  it('renders p', () => {
    expect(wrapper.find('p').text()).toEqual('Welcome to my world')
  })
})

Обратите внимание: shallow следует использовать, когда дочерние элементы компонента не нужно отображать или когда у компонента нет дочернего элемента, в то время как mount следует использовать, когда дочерние элементы компонента должны отображаться вместе с компонентом. Обратитесь к Enzyme docs для получения дополнительной информации.

Следующее, что нужно сделать после выполнения вышеуказанных шагов, - это запустить наш тест.

Запустить

npm test

Если все прошло хорошо, два вышеуказанных теста должны пройти.

Если вам это понравилось, нажмите 💚 ниже, чтобы другие люди увидели это здесь, на Medium. Кроме того, если у вас есть какие-либо вопросы или замечания, поделитесь своими мыслями / вопросами в разделе комментариев.

#3