Тестирование Реакция компонентов с расширением .jsx

Я новичок в области React, и сейчас я изучаю способ тестирования компонентов в React. Я следовал этому примеру: https://www.codementor.io/reactjs/tutorial/test-reactjs-components-karma-webpack для создания модульной системы тестирования для React с использованием мокко и кармы.Тестирование Реакция компонентов с расширением .jsx

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

Я попытался использовать этот пример: http://www.bebetterdeveloper.com/coding/getting-started-react-mocha.html. Но это не охватывает карму.

Как использовать карму, чтобы файлы jsx были построены, а затем импортированы?

Я использую глотку для создания артефактов и моего NodeJS версия 5,6

источник

2016-06-30 chrisrhyno2003

Есть ли определенная причина, по которой вы хотите использовать Карму? Я могу опубликовать ответ, дающий вам мою полную тестовую настройку, но я использую Mocha и Chai, и мне не нужно быть опытным, как Karma. –

Ну, нет конкретных причин для использования Кармы. Я следил за учебником и, по-видимому, в большинстве примеров делал что-то вроде кармы или жасмина. Так что да. Но тогда, следующий вопрос был бы, не возможно ли использовать Карму, Мокку и глотку? – chrisrhyno2003

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

Вот простой пример для модульного тестирования Реагировать компоненты с помощью Mocha, Chai и помощник jsdom, который используется вместо тестового бегуна как Карма.

Вам понадобятся следующие зависимости:

"dependencies": { 
    "react": "^15.1.0", 
    "react-dom": "^15.1.0" 
}, 
"devDependencies": { 
    "babel-preset-es2015": "^6.9.0", 
    "babel-preset-react": "^6.11.1", 
    "babel-register": "^6.9.0", 
    "chai": "^3.5.0", 
    "jsdom": "^9.3.0", 
    "mocha": "^2.5.3" 
}

Это также полезно иметь сценарий НПМ, который указывает на мокко - npm run test будет выполнять ваши тесты:

"scripts": { 
    "test": "./node_modules/.bin/mocha" 
},

После того, как вы установили ваши зависимости вам понадобится структура каталогов, которая выглядит примерно так:

Мы начнем с вашего файла .babelrc. Вам понадобится Babel, чтобы перевести ваш JSX в JavaScript. Если вы хотите использовать синтаксис ES6 (настоятельно рекомендуется), Babel также поможет в этом. Я включил оба этих пресета в devDependencies.

.babelrc:

{ 
    "presets": ["es2015", "react"] 
}

Далее, мы будем смотреть на jsdom помощника. Это необходимо для того, чтобы визуализировать компоненты React в DOM с внутренней памятью, который обычно обрабатывается тестирующим маркером, таким как Karma.

jsdom.js:

(function() { 
    'use strict'; 

    var jsdom = require('jsdom'), 
     baseHTML, 
     window; 

    if (!global.window) { 
     baseHTML = '<!DOCTYPE html><html><head lang="en"><meta charset="UTF-8"><title>Tests</title></head><body></body></html>'; 
     window = jsdom.jsdom(baseHTML).defaultView; 

     global.window = window; 
     global.document = window.document; 
     global.navigator = window.navigator; 
    } 

}());

Для того, чтобы использовать этот jsdom помощник для использования в наших тестах мокко, мы должны создать mocha.opts файл, который определяет несколько вариантов конфигурации. Мы добавим компилятор, который расскажет Бабелю о предварительной обработке тестов, и мы сделаем require помощником jsdom, так что React имеет DOM для рендеринга компонентов.

mocha.opts:

--compilers js:babel-register 
--recursive 
--reporter spec 
--ui bdd 
--require ./test/util/jsdom.js

Наконец, мы можем начать тестирование Реагировать компонентов. Например, вот простой компонент, который мы можем проверить.

test-component.ЯШ:

import React from 'react'; 

export default class TestComponent extends React.Component { 
    render() { 
     return (
      <div className="test-component">Here is a test component</div> 
     ); 
    } 
}

А вот набор тестов, который тестирует разметку этого компонента.

тест-component.spec.js:

import TestComponent from '../../src/test-component'; 
import {expect} from 'chai'; 

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import ReactTestUtils from '../../node_modules/react/lib/ReactTestUtils'; 

describe('Test Component',() => { 
    let renderedNode; 

    function renderComponent() { 
     const componentElement = React.createElement(TestComponent), 
      renderedElement = ReactTestUtils.renderIntoDocument(componentElement); 

     renderedNode = ReactDOM.findDOMNode(renderedElement); 
    } 

    beforeEach(() => { 
     renderComponent(); 
    }); 

    it('should exist with the correct markup',() => { 
     expect(renderedNode.tagName).to.equal('DIV'); 
     expect(renderedNode.className).to.equal('test-component'); 
     expect(renderedNode.textContent).to.equal('Here is a test component'); 
    }); 
});

На данный момент, команда npm run test должна привести к одной проходной тест.

И все! Если вы ищете более продвинутые методы тестирования, вы можете полностью избежать необходимости помощника jsdom и использовать мелкую визуализацию для своих тестов. Я очень рекомендую Enzyme, если вы хотите воспользоваться этим подходом.

Дайте мне знать, если у вас есть вопросы!

источник

2016-07-01 00:26:07

Это замечательно. Но опять же, все ваши файлы реагирующих компонентов имеют расширение .js, а не .jsx. Не повлияет ли это на тесты? – chrisrhyno2003

Нет, вы можете использовать либо расширение. Единственное различие заключается в том, что ваш оператор 'import' в тесте должен включать расширение' .jsx'. Опускание расширений допускается только для файлов, заканчивающихся на '.js'. –

Ага хорошо. Я попробую это. Отлично. Спасибо! – chrisrhyno2003

Тестирование Реакция компонентов с расширением .jsx

ответ

Смежные вопросы