Skip to content

Commit 0c89416

Browse files
author
RoFlection Bot
committed
add details to the readme file (#50)
1 parent 63a5e79 commit 0c89416

File tree

1 file changed

+88
-2
lines changed

1 file changed

+88
-2
lines changed

README.md

Lines changed: 88 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
1-
# react-testing-library-lua
1+
# React Testing Library Lua
2+
Simple and complete testing utilities that encourage good testing practices.
23

3-
* Port version [v12.1.5](https://github.com/testing-library/react-testing-library/tree/v12.1.5)
4+
**Ported version [v12.1.5](https://github.com/testing-library/react-testing-library/tree/v12.1.5)**
45

56
## Installation
67

@@ -10,3 +11,88 @@ At the moment, React Testing Library only works well with projects that are rely
1011
[dev_dependencies]
1112
ReactTestingLibrary = "github.com/roblox/[email protected]"
1213
```
14+
15+
<hr />
16+
17+
## Table of Contents
18+
19+
- [The Problem](#the-problem)
20+
- [This Solution](#this-solution)
21+
- [Guiding Principles](#guiding-principles)
22+
- [Requirements](#requirements)
23+
- [Installation](#installation)
24+
- [Deviations](#deviations)
25+
26+
## The Problem
27+
28+
You want to write maintainable tests for your React components. As a part of this goal, you want your tests to avoid including implementation details of your components and rather focus on making your tests give you the confidence for which they are intended. As part of this, you want your testbase to be maintainable in the long run so refactors of your components (changes to implementation but not functionality) don't break your tests and slow you and your team down.
29+
30+
## This Solution
31+
32+
The `React Testing Library` is a very light-weight solution for testing React components. It provides light utility functions on top of `react-roblox` in a way that encourages better testing practices.
33+
34+
Rather than dealing with instances of rendered React components, your tests will work with actual nodes. The utilities this library provides facilitate querying in the same way the user would. Finding form elements by their placeholder text (just like a user would), finding links and buttons from their text (like a user would). It also exposes a recommended way to find elements by a data-testid as an "escape hatch" for elements where the text content does not make sense or is not practical.
35+
36+
This library allows you to get your tests closer to using your components the way a user will, which allows your tests to give you more confidence that your application will work when a real user uses it.
37+
38+
39+
## Guiding Principles
40+
41+
> [The more your tests resemble the way your software is used, the more
42+
> confidence they can give you.][guiding-principle]
43+
44+
We try to only expose methods and utilities that encourage you to write tests
45+
that closely resemble how your web pages are used.
46+
47+
48+
## Requirements
49+
`React Testing Library` requires `Jest-Roblox` v3 or higher. For more information on Jest-Roblox, check the documentation
50+
51+
**This guide assumes Jest-Roblox is installed and working**
52+
53+
## Installation
54+
55+
To install this library add it to your dev_dependencies in your rotriever.toml.
56+
57+
```
58+
[dev_dependencies]
59+
ReactTestingLibrary = "github.com/roblox/[email protected]"
60+
```
61+
62+
Run `rotrieve install` to install React Testing Library Lua.
63+
64+
**Check the [the JS documentation](https://testing-library.com/docs/) for details. This guide focuses on deviations, and gives some examples.**
65+
66+
## Deviations
67+
`React Testing Library` exposes the Core API from [dom-testing-library-lua](https://github.com/Roblox/dom-testing-library-lua). The same deviations described in its README apply to this library.
68+
69+
### TestId
70+
TestId is implemented as a Tag. DOM version is implemented as an HTML element attribute.
71+
The tag is declared as `<TEST_ID_ATTRIBUTE>=<VALUE>`. Like upstream, the attribute name by default is `data-testid` but can configured.
72+
73+
Basic example
74+
```lua
75+
local ref = React.createRef()
76+
render(React.createElement("Frame",{ [React.Tag]= "data-testid=firstName" }))
77+
expect(queryByTestId("firstName")).toBeTruthy()
78+
```
79+
80+
### render
81+
The `render` function will accept ReactElements instead of jsx (not available/supported)
82+
```lua
83+
local spy = jest.fn()
84+
local function Component()
85+
React.useEffect(function()
86+
spy()
87+
end, {})
88+
return nil
89+
end
90+
local unmount = render(React.createElement(Component, nil)).unmount
91+
expect(spy).toHaveBeenCalledTimes(0)
92+
unmount()
93+
expect(spy).toHaveBeenCalledTimes(1)
94+
```
95+
96+
97+
### Document
98+
Because in Lua there is no concept of document, we provide one Instance that will be used as the default one. This will ensure that tags, and events work as expected, while keeping the test setup simple. It is reexported as is from `dom-testing-library-lua`.

0 commit comments

Comments
 (0)