testing-library / native-testing-library

🐳 Simple and complete React Native testing utilities that encourage good testing practices.
https://native-testing-library.com
MIT License
516 stars 44 forks source link

Help with test setup #131

Closed RicardoBrito1938 closed 4 years ago

RicardoBrito1938 commented 4 years ago

Hello team, i am trying to implement a test in a simple code but i am getting the following error:


    Unable to find an element with the text: React. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible.``` 

my code is able to load it, but somehow the test can not see it

``` import React from 'react';

import TechList from '../../app/components/Techlist';

import { render, fireEvent } from '@testing-library/react-native';

// eslint-disable-next-line no-undef
describe('Techlist', () => {
  it('should be able to add new tech', () => {
    const { getByText, getByTestId } = render(<TechList />);

    fireEvent.changeText(getByTestId('tech-input'), 'React');
    fireEvent.press(getByText('Add'));

    expect(getByText('React')).toBeTruthy();
  });
});

import {
  View,
  TextInput,
  TouchableOpacity,
  Text,
  FlatList,
} from 'react-native';

// import { Container } from './styles';

const Techlist = () => {
  const [techs, setTechs] = useState([]);
  const [newTech, setNewTech] = useState('');

  const handleAdd = () => {
    setTechs([...techs, newTech]);
  };

  return (
    <View>
      <FlatList
        data={techs}
        keyExtractor={(tech) => tech}
        renderItem={({ item }) => <Text>{item}</Text>}
      />

      <TextInput
        onChangeText={setNewTech}
        testID="tech-input"
        value={newTech}
      />

      <TouchableOpacity onPress={handleAdd}>
        <Text>Add</Text>
      </TouchableOpacity>
    </View>
  );
};

export default Techlist;;````

would you kindly let me know what i am missing here? i can share my configurations or any other info if required
RicardoBrito1938 commented 4 years ago

in case someone came here by googling, jest was not getting TouchableOpacity, this workaround i found in another forun fixed the issue

  'react-native/Libraries/Components/Touchable/TouchableOpacity.js',
  () => {
    const { TouchableHighlight } = require('react-native');
    const MockTouchable = (props) => {
      return <TouchableHighlight {...props} />;
    };
    MockTouchable.displayName = 'TouchableOpacity';

    return MockTouchable;
  }
);