Модульное тестирование React - Enzmye Shallow

Я пытаюсь настроить модульное тестирование в React с Enzyme. Когда я запускаю команду «npm-test», тест не проходит. Консольный терминал указывает, что произошел сбой из-за shallow (). Я установил энзим с помощью этой команды npm install --save Enhancement Enhancement-Adapter-React-16 react-test-renderer. Кто-нибудь знает, как решить эту проблему?

Ниже представлен компонент

import React from 'react';

    class Login extends Component {
      render() {
        return <div><input
          onChange = {(event) => {
             this.setState({input: event.target.value})}}
          type = "text" /></div>;
      }
    }

    export default Login;

Это модульный тест, который я написал для компонента.

import React from 'react';
import { configure, shallow } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

import Login from '../../../src/components/authentication/Login';
import Enzyme from 'enzyme';

configure({adapter: new Adapter()});

  it("should create an entry in component state with the event value", () => {
    // given
    const component = shallow(<Login/>);
    const form = component.find('input');
    // when
    form.props().onChange({target: {
      name: 'myName',
      value: 'myValue'
    }});
    // then
    expect(component.state('input')).toEqual('myValue');
  });

Спасибо за помощь.

Итак, каково собственное сообщение об ошибке?

Andreas Köberle 02.05.2018 15:30

Могут быть проблемы с энзим-адаптером-реакцией-16. похоже, у них 311 открытых проблем: github.com/airbnb/enzyme/… Я запустил ваш код с 15.4 и не имел никаких проблем.

mhough 02.05.2018 15:30
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
0
2
151
1

Ответы 1

Привет, возможно, ты скучаешь по конвенциям:

вы должны поместить свои тестовые файлы в каталог __tests__, и файл тестов должен быть назван: YourComponent.test.js

Затем заверните свой тест в набор тестов:

describe('Your test suite', () => {
  test('it should do something', () => {
   // the content of your test
  });
});

Привет, я попытался поместить логин и Login.test.js в одну папку, и теперь я получаю эту ошибку ● Не удалось запустить набор тестов ReferenceError: компонент не определен в Object. <anonymous> (src / components / authentication / Login.js: 3:21) в Object. <anonymous> (src / components / authentication / Login.test.js: 5:14) в <anonymous> в process._tickCallback (internal / process / next_tick.js: 188: 7)

Great Khan 2016 02.05.2018 17:22

Peharps, вы не определили Component в своих компонентах: import React, { Component } from 'react'

t3__rry 02.05.2018 17:37

я забыл добавить импорт React, {Component} из реакции;

Great Khan 2016 02.05.2018 17:37

Хорошо, это легко исправить

t3__rry 02.05.2018 17:37

Спасибо за помощь. Я слишком долго трачу на это; (

Great Khan 2016 02.05.2018 17:38

Позвольте нам продолжить обсуждение в чате.

t3__rry 02.05.2018 17:39

Другие вопросы по теме